Open the CSS clamp Fluid Typography Calculator
Free CSS clamp() calculator for fluid, responsive typography. Enter your minimum and maximum font size and viewport widths.
- Free to use
- No signup
- Nothing to install
- Runs in your browser
Illustration. Open the tool for the real thing.
What is the CSS clamp Fluid Typography Calculator?
Fixed font sizes look too small on large monitors and too large on phones, and media-query breakpoints for text size create sudden jumps instead of smooth scaling. The CSS clamp() function solves this in one line by scaling a value fluidly between a minimum and maximum based on the viewport width, but writing the required vw-based formula by hand is fiddly and error-prone.
Enter your minimum font size at your minimum viewport width, and your maximum font size at your maximum viewport width, and this tool calculates the exact clamp(MIN, PREFERRED, MAX) CSS value for you, using rem units for accessibility. A live preview box shows the resulting text size and lets you drag a slider to simulate any viewport width in between.
3 steps to your result
Open the tool and follow along. Nothing to install.
What you get
Generates the precise vw-based preferred value, not a rough approximation.
Drag to preview the exact rendered size at any viewport width.
Keeps text scalable with the user's browser font size setting.
One click copies the finished clamp() declaration.
AZRS tools are free to open and use.
It opens in your browser, so there is nothing to download.
Used for
Pick one to see how it fits.
Front-end developers
Add smooth, accessible fluid type scales without a media-query ladder.
Try it freeDesigners handing off specs
Communicate a min/max range instead of fixed breakpoint sizes.
Try it freeDesign-system maintainers
Generate consistent clamp() values for a whole type scale.
Try it freeHow it compares
A plain look at this tool next to the usual alternative.
| This utility | Desktop software | |
|---|---|---|
| Install | Nothing to install | Usually an app or program to install |
| Account | No signup | Depends on the product |
| Cost | Free to use | Free or paid, depends on the product |
| Where it runs | In your browser tab | On your computer |
Questions people ask
What does clamp() actually do?
It picks the middle of three values — a minimum, a fluid preferred value, and a maximum — so it scales smoothly between the min and max but never goes outside that range.
Why use rem instead of px?
rem respects the user's browser font-size setting, which is important for accessibility; px ignores it and looks the same regardless of that preference.
Does clamp() work in all browsers?
Yes, it is supported in all modern browsers (Chrome, Firefox, Safari, Edge) released since 2020.
Can I use this for spacing, not just font size?
Yes, the same formula works for any CSS length property such as padding or margin — just treat the numbers as your spacing values instead of font sizes.
What happens below my minimum viewport width?
The value stays fixed at your minimum size — clamp() never goes smaller than the minimum you set.
More free tools
Related to the CSS clamp Fluid Typography Calculator.
Try the CSS clamp Fluid Typography Calculator now
Generate a CSS clamp() value for font sizes that scale smoothly between viewports. Free to use.
Try it free