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 with rem and vw units. Verify resizing in your actual layout.
How CSS Clamp Generator works in your browser
Given a minimum and maximum size and the viewport widths where each should apply, the generator solves the straight line between those two points and expresses it as a preferred value combining rem and vw. That value is wrapped in clamp(min, preferred, max) so it never goes outside your bounds.
Worked example: 16px at 320px and 24px at 1280px produces clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem), assuming a 16px root font size. At 800px the unrounded interpolation is 20px. Below and above the bounds it stops at the minimum and maximum. Test browser zoom, larger default fonts and real content: mixing rem and vw does not guarantee accessible text resizing.
When to use it
- Making headings scale smoothly between mobile and desktop without media queries.
- Creating fluid spacing tokens for a design system.
- Replacing a stack of breakpoint font sizes with one declaration.
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?
Not automatically. The rem conversion assumes a 16px root font size. Test zoom and user font-size changes; a rem plus vw expression alone does not guarantee accessible resizing.