CSS clamp() Calculator
Generate a clamp() value that scales type between two viewports.
What you provide
Browsers default to 16px. Change this only if you have overridden the root size.
Result
font-size: clamp(1rem, 0.833rem + 0.833vw, 1.5rem)
Two details make this accessible rather than merely clever. The preferred value keeps a rem term, so text still responds when someone sets a larger default font size, and a value of pure vw would break that. And both ends are bounded, so the text has a floor on a phone and a ceiling on a wide monitor. The same technique works for padding, margins and gaps, not just type.
font-size: clamp(1rem, 0.833rem + 0.833vw, 1.5rem);
- MinimumBelow 320px viewport
- 16px (1rem)
- MaximumAbove 1280px viewport
- 24px (1.5rem)
- Growth rate
- 0.83vw
- Scale ratio
- 1.5×
- At 768px viewport
- 19.7px
What this cannot tell you
- Produces a CSS value from your numbers, in your browser. It does not inspect your site or your stylesheet.
- The interpolation is linear between the two viewport widths you give. Type scales that need a curve, or that change at a specific breakpoint, need a different approach.
Take this with you
How this calculation works
The preferred value inside clamp() is the equation of a straight line through the two points you specify. The vw term is the slope, and the rem term is where that line crosses zero width. Keeping a rem term rather than using pure vw is what makes the result accessible: text with a viewport-only size ignores the reader browser font setting entirely, which matters to anyone who has raised it deliberately.
What the results mean
- Growth rate
- The vw component, and how fast the size changes as the window resizes. Above about 5vw the movement becomes noticeable and distracting.
- Scale ratio
- The large size divided by the small one. Headings often want 1.5 or more, body text rarely benefits from anything above 1.3.
- At 768px viewport
- The computed size at a typical tablet width, which is a useful sanity check that the middle of the range looks sensible.
Common problems and fixes
- Text does not respond when the browser font size is increased
- The preferred value probably has no rem term, or the minimum is set in pixels rather than rem. Both ends of a clamp should be in rem for text, and the preferred value needs its rem component. This is the accessibility failure that fluid typography most commonly introduces, and it is invisible to anyone testing at default settings.
- Headings look enormous on a large monitor
- Your upper viewport bound is probably too high. Setting it around 1200 to 1400 pixels caps the size at a normal laptop width, so an ultrawide display gets readable text rather than a poster. There is no benefit in continuing to scale past the width where a line of text is already comfortably long.
Frequently asked questions
What do the three values in clamp() do?
The first is the floor, the last is the ceiling, and the middle is the preferred value used between them. The browser picks the middle value unless it falls outside the bounds, in which case the nearest bound wins. It is min and max combined in one function.
Should I use vw or vi?
For most sites they behave identically. The vi unit is relative to the inline axis, which follows writing direction, so it is the better choice for anything that might be translated into a vertical writing mode. Support is broad enough now that using vi costs nothing.
Can I use clamp for spacing too?
Yes, and it works particularly well for section padding, where a fixed value is either cramped on a phone or wasteful on a desktop. The same rule applies about keeping a rem term, since spacing that ignores the reader font size gets tight when the text grows.
Put this on your own site
Free to embed, no attribution required beyond the source link the frame carries itself. It runs entirely in your visitor's browser, sets no cookies and loads no third-party script.
<iframe src="https://runthetests.com/embed/css-clamp-calculator/" width="100%" height="560" style="border:1px solid #e5e5e5;border-radius:8px" title="CSS clamp() Calculator" loading="lazy"></iframe>
Preview it at https://runthetests.com/embed/css-clamp-calculator/. Embedded pages are marked noindex, so yours stays the canonical copy — not this one.