For years, responsive font sizing meant picking a handful of breakpoints and writing a media query for each one -- a font is 16px on mobile, 18px on tablet, 22px on desktop, with a hard jump at every breakpoint. clamp() replaced that pattern with a single line of CSS that scales continuously instead of jumping.
The three-value syntax
clamp() takes exactly three values: a minimum, a preferred value, and a maximum.
font-size: clamp(1rem, 2vw + 0.5rem, 2.5rem);
The browser evaluates the middle value on every render. If it's smaller than the minimum, the minimum wins. If it's larger than the maximum, the maximum wins. Anywhere in between, the preferred value is used as-is. That middle value is almost always a mix of a viewport unit (like vw) and a fixed unit (like rem), which is what makes the scaling smooth instead of jumpy -- as the viewport width changes, the vw component changes continuously with it.
Why the preferred value needs two parts
A pure viewport unit alone, like 5vw, scales forever in both directions with no floor or ceiling -- shrink the window enough and the text becomes unreadable, or stretch it wide enough and it becomes absurd. That's the whole reason clamp() takes three arguments instead of one: the min and max exist specifically to cap what the fluid middle value is allowed to do.
Mixing a fixed unit into the middle value (2vw + 0.5rem rather than just 2vw) also changes the slope of the scaling, which is often what actually gets you the curve you want between the two caps -- pure vw alone tends to change too aggressively.
Where it's actually useful
clamp() isn't limited to font-size. It works on any property that takes a length: padding, width, gap, line-height. A hero heading's width, a card's max width, a section's padding -- anywhere you'd otherwise write two or three media query overrides for the same property, clamp() can often collapse that into one declaration.
It doesn't replace media queries entirely, though. Media queries are still the right tool when you need to change layout -- switching from a two-column grid to one column, hiding an element, reordering content. clamp() only interpolates a single numeric value; it can't restructure a page.
Browser support and the practical catch
clamp() has been supported in all major browsers for several years now, so it's safe to use without a fallback in most projects. The practical catch is testing: because the value changes continuously rather than at fixed breakpoints, you should actually drag your browser window from narrow to wide and watch the text, rather than just checking it at a couple of preset widths the way you would with media queries.
Building the value without doing the algebra by hand
The hard part of writing a clamp() by hand isn't the syntax -- it's picking a vw coefficient that produces the exact minimum and maximum you want at your chosen viewport widths, which involves solving a small linear equation. The Clamp Calculator does that math for you: give it a minimum size, a maximum size, and the two viewport widths you want them to apply at, and it generates the exact clamp() value.
If you're working with the min/max numbers themselves and need to convert between px and rem first -- since clamp() values are usually written in rem for accessibility -- the PX to REM Converter handles that conversion against your page's base font size.