Fluid sizing without a stack of media queries
You want your headline to be 32px on a wide monitor and 20px on a phone, smoothly scaling in between. The old way meant three or four media queries and a font size that jumped at each breakpoint. clamp() does it in one line that scales continuously.
clamp(min, preferred, max) picks the middle value but never lets it drop below min or climb above max. The trick is the preferred value: a mix of rem and vw that grows with the screen. Getting those two numbers right by hand involves slope-intercept math nobody wants to do twice. This calculator does it for you.
How the math works (briefly)
Give it four numbers: the size you want at your smallest viewport, the size at your largest, and those two viewport widths. It draws a straight line between the two points and reads off the slope. That slope becomes the vw part; the leftover becomes the rem part.
Say you want 20px at 360px wide and 32px at 1280px wide. The result is something like clamp(1.25rem, 0.793rem + 1.304vw, 2rem). Below 360px it holds at 20px. Above 1280px it caps at 32px. Everywhere between, it slides.
The rem units matter for accessibility: because the bounds are in rem, they still respond when someone bumps their browser’s default font size. A clamp built purely in px quietly ignores that preference.
Drag to see it move
Numbers on a screen don’t tell you how the scaling feels. So drag the viewport slider. The sample text resizes to the exact pixel value your clamp would produce at that width, and the readout shows both the viewport and the computed size.
Slide it down past your min viewport and watch the size flatten out, that’s the clamp floor doing its job. Slide it up past the max and it flattens again at the top. The slope in the middle is the part you’re really tuning.
Where to use it
Headings are the obvious one, but clamp shines anywhere a value should breathe with the screen: section padding, gaps in a grid, the width of a centered article, even border radius on hero cards. The same min/preferred/max pattern works for all of them, just swap font-size for padding or width.
One habit worth keeping: don’t let the min and max drift too far apart. A headline that’s 14px on mobile and 64px on desktop scales technically, but the jump looks unbalanced. Keep the ratio reasonable and the page feels intentional.
Questions people ask
Why rem and vw instead of just px?
rem keeps the bounds tied to the user’s font-size preference, which is an accessibility win. vw is what makes the value fluid, it’s a percentage of the viewport width. Mixing them gives you a value that’s both responsive and respectful of zoom.
What happens outside my viewport range?
Nothing dramatic, and that’s the point. Below your min width the size locks to the minimum; above your max width it locks to the maximum. The fluid scaling only happens between the two.
Does clamp() work in all browsers?
Yes. It’s been supported in every major browser since 2020, so you can use it without a fallback in any modern project. Very old browsers would ignore it, in which case a plain font-size fallback above the clamp line covers you.
Can I use this for spacing, not just text?
Absolutely. Feed it your min and max padding or margin instead of font sizes. The output is just a length value, so it drops into any property that takes one.
Should the preferred value ever have a negative rem?
It can, and it’s fine. When the line’s slope is steep, the math sometimes lands on a negative intercept like -0.5rem + 3vw. That’s valid CSS and produces exactly the curve you asked for.