CSS clamp() Generator
Make a font size or spacing scale with the screen width, between a min and a max
Fluid size
px
At the min viewport and below.
px
At the max viewport and above.
px
Where the size starts to grow.
px
Where it stops.
px
1rem, 16px unless the page's CSS changes it.
Result
In px, the size ignores the font size visitors set in their browser. Prefer rem for text.
The max size is more than 2.5 times the min size. Zooming in to 200% may then not double the text at every width, as WCAG 1.4.4 requires: narrow the range or raise the min size.
Preview
–
Window width
–
Size in px
–
Size in rem
The quick brown fox jumps over the lazy dog.
This text uses the clamp() above: resize the window to watch it change. The table gives the size at other widths.
| Viewport | px | rem |
|---|