How to use the fluid typography calculator
- Set the smallest and largest sizes. Choose the font size you want on a small phone and the size you want on a large desktop screen.
- Set where scaling starts and stops. Below the start width the text stays at the smallest size. Above the stop width it stays at the largest size.
- Check your root font size. The output uses rem units so it respects the user's browser font settings. Most sites use a 16px root size.
- Preview and copy. Drag the preview screen width to see the size at any width, then copy the font-size rule.
What is fluid typography?
Fluid typography makes text scale smoothly with the width of the screen instead of jumping between fixed sizes at breakpoints. Headings stay proportionate on every device without a stack of media queries.
How clamp() works
clamp(min, preferred, max) uses the preferred value but never goes below the minimum or above the maximum. The preferred value combines a rem amount with a vw amount, so it grows at a steady rate as the screen gets wider. The calculator works out the slope between your two points.
Accessibility
Using rem for the minimum and maximum, and adding a rem term to the preferred value, means text still responds when a user increases their browser font size or zooms. Pure vw font sizes do not, which fails WCAG's resize text requirement.
Frequently asked questions
Is clamp() supported everywhere?
Yes. clamp() works in all current browsers.
Should I use fluid type for body text?
It is most useful for headings. Body text usually works best with a small range, for example 16px to 18px, or a fixed size.
Why is the output in rem instead of px?
rem values scale with the user's browser font settings, which is better for accessibility.