Fluid typography
Set how large the text should be on a phone and on a large monitor. We generate a clamp() function so the size changes smoothly between them, with no jumps at breakpoints.
32 px
64 px
360 px
1440 px
900 px → 48,0 px
320 px1920 px
Result
font-size: clamp(2rem, 1.333rem + 2.963vw, 4rem);
How clamp() works
Three values: a minimum, a fluid size and a maximum. The browser uses the fluid size but never goes below the minimum or above the maximum.
Why rem + vw, not just vw
vw alone does not respond to the browser’s font size setting. Combining it with rem makes sure people with weaker eyesight can still enlarge the text.
Where to use it
Mainly headings and hero sections. For body text a small difference (16 → 18 px) or a fixed size is enough.