Fluid Typography With CSS: Text That Scales Itself
Fluid typography uses viewport-relative sizing to make text scale smoothly across devices. Here is how I implement it without pitfalls. Fluid typography is the practice of sizing text so that it scales smoothly with the viewport, rather than jumping between fixed sizes at breakpoints. The result is text that is always appropriately sized for the screen, with no abrupt changes. After using fluid typography on many projects, I have settled on an approach that is reliable and avoids the common pitfalls. Here is how I implement it. The Core Tool Is clamp The clamp function takes three values: a minimum, a preferred value, and a maximum. The preferred value is usually a viewport-relative expression, and the minimum and maximum bound it so it never gets too small or too large. This is the foundation of fluid typography. h1 { font-size: clamp(1.5rem, 1rem + 4vw, 3rem); } Here the heading is at least 1.5rem, at most 3rem, and in between it scales with the viewport. On a 400px wide screen, 4vw is 16px, so the preferred value is 1rem plus 16px, which is 32px or 2rem, clamped to the range. More guides are on the Spark Blog.