Fluid typography calculator
Produces a `clamp()` that scales a font size linearly between two viewport widths and stops at both ends. The modern replacement for a stack of font-size media queries.
How to use the fluid typography calculator
The output uses rem rather than px for the minimum and maximum deliberately. A clamp expressed entirely in px ignores the user’s browser font-size setting, which means someone who has increased it for readability gets no benefit; an accessibility failure that is easy to ship without noticing. Mixing a rem intercept with a vw slope keeps the size responsive to both the viewport and the user’s preference. One thing to watch: a very steep slope makes text jump noticeably as a window is resized, so keeping the size difference modest across a wide viewport range usually reads better than a dramatic one.
Questions
Takes a minimum, a preferred value and a maximum, and uses the preferred value only while it sits between the two.
A px-only clamp ignores the user’s browser font-size setting, so anyone who increased it for readability gets nothing.
Rarely. One clamp replaces a whole ladder of breakpoints, and scales smoothly between them rather than jumping.
320 to 1280 covers phone to laptop. Going wider makes the slope shallower and the effect subtler.
Yes, in every browser since 2020.