For years, responsive text sizing meant writing the same heading rule three or four times inside different media queries. A single CSS function now replaces most of that — and understanding what it actually does makes it far easier to trust.
The Three Values Inside clamp()
clamp(minimum, preferred, maximum) takes exactly three arguments. The minimum is a hard floor — text is never rendered smaller than this, no matter how narrow the screen gets. The maximum is a hard ceiling, working the same way in the other direction. The preferred value, which usually mixes a fixed unit with a viewport-relative one, is what actually determines the size in between — the browser evaluates it continuously and only clamps to the min or max once the preferred value would otherwise cross that boundary.
Why This Beats Fixed Breakpoints
A traditional approach sets one font size below a breakpoint and a different one above it — which means text jumps abruptly at that exact pixel width, and can look slightly too small just before the jump and slightly too large just after it. Fluid typography with clamp() scales continuously across the entire range between the minimum and maximum viewport widths you choose, so text is sized appropriately for every width in between, not just a handful of fixed steps.
Why the Preferred Value Uses vw
A viewport width unit (vw) equals 1% of the browser window's current width, so it automatically recalculates every time the window is resized — no JavaScript or resize listener required. Combining it with a fixed unit, like 1rem + 2vw, keeps a stable baseline size while still letting the viewport-based portion do the actual scaling, which is why generated fluid typography values almost always mix the two rather than using a pure viewport unit alone.
Generate Your Own clamp() Value
Set your minimum and maximum sizes and viewport widths in the free CSS Fluid Typography Calculator to get a ready-to-paste clamp() value.
FAQ
What do the three values inside clamp() actually do? clamp(minimum, preferred, maximum) takes three values: the smallest size the text is ever allowed to be, a flexible "preferred" value (usually based on the viewport width) that does the actual scaling, and the largest size the text is ever allowed to be. The browser uses the preferred value as long as it falls between the minimum and maximum, and locks to whichever bound it would otherwise exceed.
Why is fluid typography better than fixed breakpoints? Media-query breakpoints jump text size abruptly at specific widths, which can leave text feeling too small just below a breakpoint and awkwardly large just above it. Fluid typography with clamp() scales continuously across every width in between, so text is always sized appropriately for the exact viewport rather than one of a few fixed steps.
Why does the preferred value in clamp() usually include a viewport unit? A viewport unit like vw represents a percentage of the browser window's width, so a value like 4vw automatically recalculates as the window is resized. Combining it with a fixed rem value (like "1rem + 2vw") lets the text scale with the viewport while still keeping a stable, predictable baseline size.