CSS Clamp Generator
Generate fluid typography and spacing with clamp() and viewport units.
font-size: clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem);
Live preview
The quick brown fox jumps over the lazy dog
Resize this window to watch the size scale between 16px and 24px.
| Viewport width | Computed size |
|---|---|
| 320px | 16.0px |
| 480px | 17.3px |
| 768px | 19.7px |
| 1024px | 21.9px |
| 1280px | 24.0px |
| 1536px | 24.0px |
| 1920px | 24.0px |
About CSS Clamp Generator
Fluid typography scales text smoothly with the viewport instead of stepping between media queries, and clamp() expresses it in a single line of CSS.
Give this generator your minimum and maximum sizes and the viewport widths they apply at, and it solves the linear equation for you and emits a clamp() expression that stays zoom-accessible.
Frequently asked questions
How does clamp work?
It takes a minimum, a preferred value and a maximum, and returns the preferred value clamped between the other two.
Why is the preferred value a formula?
The linear formula makes the size scale smoothly with the viewport between your two breakpoints instead of jumping at each one.
Is it accessible?
Yes, provided the preferred value includes a rem component, which this generator always emits so that browser zoom and user font size still work.