The problem with breakpoint-based font sizes
The traditional way to make a headline responsive is a handful of media queries, each setting a different fixed font-size at a different viewport width. It works, but it moves in visible jumps — resize a browser window slowly across a breakpoint and the text visibly snaps from one size to the next, rather than growing smoothly the way the rest of a fluid, responsive layout does. It's also more code to maintain: every new breakpoint is another rule to keep in sync with the ones around it.
How clamp() replaces the whole stack with one line
CSS clamp() takes three values — a minimum, a preferred value, and a maximum — and the browser picks whichever is appropriate: the preferred value if it falls between the bounds, or whichever bound it would otherwise cross. Written as font-size: clamp(1rem, 0.85rem + 1vw, 1.75rem), a single declaration shrinks text down to a comfortable minimum on small screens, scales it up continuously as the viewport grows, and caps it at a maximum so a headline doesn't become oversized on an ultrawide monitor — no media queries, and no visible jump anywhere in between.
Generate your clamp() value
The accessibility detail almost everyone gets wrong
It's tempting to write the preferred value as a pure viewport unit — font-size: 4vw — but that ignores a user's browser font-size and zoom settings entirely, since vw is defined purely relative to viewport width. Someone who has increased their default text size for readability sees no benefit at all from that setting on a vw-only element. Mixing in a rem component, the way the example above does, keeps the value partly anchored to the user's actual font preferences, so increasing the browser's base font size shifts the whole range up proportionally instead of being silently ignored. It's a small detail that's easy to skip and meaningfully affects how usable the result is.
Working out the numbers by hand
The preferred value needs to be a linear function of viewport width that hits your exact minimum size at your minimum viewport and your exact maximum size at your maximum viewport. That means calculating a slope between the two font sizes across the two viewport widths, then solving for the y-intercept so the line passes through both points precisely — arithmetic that's genuinely easy to get slightly wrong by hand, especially once you're converting the constant portion to rem. It's the kind of calculation worth generating rather than eyeballing, since a small arithmetic slip produces a rule that technically works but doesn't actually hit the sizes you intended at either end.
Beyond font-size
The same technique isn't limited to typography — clamp() works for any CSS property that accepts a length, including padding, margin, gap, and width. A design system that defines its whole spacing and type scale with clamp() values scales continuously across every breakpoint at once, rather than needing a separate override for each named screen size the design happens to define.