TOOLTIKI Lovable tool, really free
Developer Web

Fluid typography calculator

Size at the small viewport
Size at the large viewport
Small viewport
Large viewport
Root font size
CSS clamp(1rem, 0.833rem + 0.8333vw, 1.5rem)
Slope 0.8333
Intercept, rem 0.8333
Minimum, rem 1
Maximum, rem 1.5
Local · rem, so user preferences still work
Advertisement
320 × 100

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

1 Fill in the fields. The answer updates as you type.
2 Read the supporting figures underneath — they are usually the ones you need next.
3 Nothing is sent anywhere; the arithmetic runs in this page.

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.

MDN — clamp()
Advertisement
300 × 250
Was this tool any good?
INTERNAL SIGNAL ONLY · WE USE IT TO FIND TOOLS WORTH REBUILDING