Type Scale Calculator

Pick a base font size and a ratio, then build a consistent static hierarchy for body copy, labels, headings, and display text. Preview each step, compare px and rem, then copy CSS tokens or a Tailwind fontSize extension. Everything runs in your browser.

Generated scale

—

Step Token px rem

Hierarchy preview

The same sample sentence at every generated size.

Copy-ready exports

Use the tokens directly, or wire them into Tailwind.

CSS custom properties 
—
How is the scale calculated?

Each step is base × ratiostep. Step zero is the base size, positive steps grow by the ratio, and negative steps divide by it. A ratio near 1 creates a dense UI scale; a larger ratio makes heading jumps more dramatic. Unlike a fluid clamp() expression, these are static design tokens that stay the same at every viewport width.