CSS clamp() Fluid Type Calculator
Make text and spacing grow smoothly with the screen, without media queries.
Fluid type scale
How to use the CSS clamp() Fluid Type Calculator
- Enter the smallest and largest size, and the screen widths where growth starts and stops.
- Copy the clamp() value for font size, padding, gap or any other length.
- Drag the width slider to preview the size on different screens.
- Open the type scale section to create a whole set of fluid sizes at once.
About this tool
Fluid sizing means a heading that is 24 pixels on a phone and 40 pixels on a wide monitor, growing smoothly in between instead of jumping at breakpoints. CSS does this with clamp(), which takes a minimum, a preferred value and a maximum. The preferred value mixes a fixed amount with a share of the viewport width, and working out the right numbers by hand is fiddly arithmetic.
This calculator does the maths. It finds the straight line between your smallest size at the smallest screen and your largest size at the largest screen, expresses it as rem plus vw, and wraps it in clamp() so the size never goes outside your limits. A chart and a live sample show the result at any width.
Accessibility matters here. Text sized only in vw does not grow when people zoom, which fails WCAG. Using rem for the fixed part, as this tool does, keeps zoom working, and you are warned when the range is so wide that zooming may still fall short. The type scale option applies the same idea to a whole set of heading and text sizes.
Frequently asked questions
How does clamp() work?
clamp(minimum, preferred, maximum) uses the preferred value but never lets it go below the minimum or above the maximum. With a preferred value such as 1rem + 2vw, the size grows with the screen between those limits.
Why rem and not px?
rem follows the visitor's chosen browser font size and zoom, so text stays readable for people who need it larger. Choose px output only if your project requires it.
Can I use it for spacing, not just text?
Yes. Any length works: padding, margins, gaps, widths. Pick the property to get a ready-to-paste declaration.
Which browsers support clamp()?
Every current browser has supported clamp() since 2020. Very old browsers ignore the declaration, so set a plain fallback value before it if you need to support them.
Is anything sent to a server?
No. All calculations run on this page; your last settings are remembered in this browser.