CSS Clamp Fluid Typography Calculator
Enter your min and max font sizes and viewport widths. Get a pixel-perfect clamp() formula with live preview — no media queries needed.
Configure
px
px
px
px
Generated CSS
Modern CSS
Old way — media queries
Live Preview
The quick brown fox jumps over the lazy dog
Min Size
Preferred
Max Size
Scale Factor
How it works
The clamp() function takes three values: a minimum, a preferred (fluid) value, and a maximum.
The preferred value uses rem + vw so the font scales linearly between your min and max viewport widths. Below the min viewport, font stays at the minimum. Above the max viewport, it stays at the maximum.
This replaces the old approach of stacking @media queries with hardcoded breakpoints — which caused abrupt size jumps and required maintaining multiple rules.