Your files stay on your device

Fluid typography calculator

Build a type scale of clamp() custom properties from a base size and ratio at two viewports, with a live preview and a zoom risk flag per step.

Enter both viewport setups.

This tool sizes text only, not line-height or letter-spacing. The vw term tracks the window, not a sidebar or container; container query units are the fix there and out of scope. The zoom figure is an approximation of page zoom, a heuristic next to WCAG 1.4.4 rather than an audit, so turn zoom on and look before you ship.

Scale

Small screenViewport width, base size, ratio

WidthBase pxRatio

Large screenViewport width, base size, ratio

WidthBase pxRatio

More settings

Steps belowSteps above

PrefixRoot font size

Steps below the base cover captions and small print, up to 6. Steps above cover headings, up to 10. The prefix names the custom properties: step gives --step-0, --step-1 and so on. The root size converts to rem.

Each step sizes base × ratio^n at both viewports, then joins the two points with a straight line. The two-ratio design lets phones take a tighter scale than desktops.

All regex & cron tools

Was this tool useful?

Fluid typography calculator

More regex & cron tools