CSS Clamp() Calculator
Generate a fluid font-size clamp() value that scales smoothly between two viewport widths, no media queries needed.
How to use CSS Clamp() Calculator
- Set the minimum and maximum font size you want.
- Set the minimum and maximum viewport width the font should scale between.
- Copy the generated clamp() value — it scales smoothly between those widths with no media queries needed.
Frequently asked questions
What does the generated value actually do?
Below the min viewport width, the font stays fixed at the min size; above the max width, it stays fixed at the max size; in between, it scales linearly using a `vw`-based calculation — all in a single `clamp()` value with no media queries.
Why does the CSS use rem instead of px?
Using rem throughout means the fluid size still scales correctly if a user has changed their browser's default font size for accessibility — a pure px/vw-based clamp would ignore that setting.
Can I use this for spacing or width, not just font-size?
Yes — the generated `clamp()` value works the same way for any CSS length property, like `padding`, `margin`, or `width`; just paste it into a different property than `font-size`.
Community
Loading...