Tech
CSS Clamp Calculator
Generate the perfect CSS clamp() value for fluid typography. Pick a min and max size and two viewport widths, and get a copy-ready clamp(MIN, PREFERRED, MAX) string in rem or px.
Build a fluid CSS clamp() value
Size at the narrow viewport. Common body text: 16 px.
Size at the wide viewport. Must be larger than the min size.
Narrowest screen you support. 320 px covers iPhone SE.
Widest design target. 1440 px is a Mac desktop default.
Browser default is 16 px. Used to convert px into rem.
CSS clamp value
font-size: clamp(1rem, 0.8571rem + 0.7143vw, 1.5rem);Slope (vw)
0.714286vw
Y axis (intercept)
0.857143rem
Min size
1rem
Max size
1.5rem
Computed size at common viewport widths
The preferred value clamps to min below 320 px and to max above 1440 px.
| Viewport width | Computed size | In rem |
|---|---|---|
| 320 px | 16 px | 1 rem |
| 480 px | 17.1429 px | 1.0714 rem |
| 768 px | 19.2 px | 1.2 rem |
| 1024 px | 21.0286 px | 1.3143 rem |
| 1280 px | 22.8571 px | 1.4286 rem |
| 1440 px | 24 px | 1.5 rem |
Frequently Asked Questions about the CSS Clamp Calculator
What does the CSS clamp() function do?
clamp(MIN, PREFERRED, MAX) returns whichever of the three values lies in the middle. The browser computes PREFERRED on every layout pass, and if the result drops below MIN it returns MIN, if it climbs above MAX it returns MAX. That single function replaces a stack of media queries: define a floor, a ceiling, and a fluid expression in the middle, and the value scales smoothly between the two endpoints. For fluid typography the PREFERRED part is a linear function of viewport width, like 0.5rem + 1.25vw, which is exactly what this calculator generates.
Why use fluid typography instead of fixed breakpoint media queries?
Fixed sizes per breakpoint jump in chunks: a heading might be 24 px below 768 px and 32 px above it, with nothing between. That produces a visible step at the breakpoint and looks awkward on the many devices that land near it. Fluid clamp values interpolate between the floor and ceiling for every pixel of viewport width, so the same heading flows from 24 px at 320 px wide to 32 px at 1440 px with no jumps. You also write one declaration instead of three or four media queries, which keeps your stylesheet shorter and easier to maintain as new device widths appear.
Why is rem preferred over px inside clamp() for fluid typography?
When a user bumps up their browser's default font size for readability (Settings > Appearance > Font size), every rem value in your styles grows with that setting. A clamp(1rem, 0.5rem + 1.25vw, 1.5rem) scales the entire fluid range alongside the user's preference, so your typography stays in proportion at any zoom or text-size setting. The same expression written in px ignores that setting and stays frozen at the designer's numbers, which fails WCAG 2.1 success criterion 1.4.4 (resize text up to 200 percent without loss of content). Use rem for any fluid type or spacing that should respect user preferences; reserve px for borders, hairlines, and other purely visual hairwidths.
How does the vw unit work in a clamp() preferred value?
1vw equals one percent of the current viewport width. On a 1000 px wide screen, 1vw is 10 px; on a 320 px wide screen it is 3.2 px. Inside the clamp() preferred value, multiplying the slope by 100 converts the linear coefficient (size change per pixel of viewport) into a vw coefficient. So a slope of 0.0125 px-per-vw-pixel becomes 1.25vw, which the browser evaluates fresh on every resize. Combine that with a rem intercept and you get a CSS-only fluid value with no JavaScript and no resize listeners.
Do all browsers support CSS clamp()?
Yes. clamp(), min(), and max() shipped together in Chrome 79, Firefox 75, Safari 13.1, and Edge 79, all of which landed in early 2020. Every browser still receiving updates supports them, with global usage above 97 percent on caniuse. The only systems that miss out are Internet Explorer 11 and Safari 13.0 or older, neither of which is realistic to target in 2026. No vendor prefix or polyfill is needed.