How fluid typography works
Fluid typography scales text continuously between a small screen and a large one instead of jumping at breakpoints. The calculator draws a straight line between two points — your minimum size at the minimum viewport, and your maximum size at the maximum viewport — and expresses it as a clamp() so it stops growing outside that range.
The maths
The slope is (max size − min size) ÷ (max viewport − min viewport). Multiplying it by 100 gives the vw part; the intercept, min size − slope × min viewport, gives the fixed part. Expressing that fixed part in rem keeps the text responsive to the reader's own font-size preference.
Picking values
- Body text: 16 → 18 or 20 px. Anything bigger hurts line length on wide screens.
- Headings: 28 → 48 px for an H1 is a comfortable range for most layouts.
- Viewport range: 360 px (small phones) to 1280 px (common content width) covers most readers.
Frequently asked questions
What does clamp() do for font sizes?
clamp(min, preferred, max) lets text scale smoothly with the viewport width while never going below the minimum or above the maximum. It replaces a stack of media-query breakpoints with a single line.
Should I use px or rem?
Use rem. A rem-based clamp still respects the reader's browser font-size setting, which matters for accessibility; the px version is shown only for reference.
Is fluid type accessible?
Yes, as long as the preferred value mixes a rem part with the vw part (as this calculator does) and the maximum is not more than about 2.5× the minimum — otherwise browser zoom has too little effect on the text.
Built and maintained by Pradeep Bhandari, Senior Engineering Manager & Full-Stack Architect. Last reviewed .