What is a modular type scale?

It is a set of font sizes derived by repeatedly multiplying a base size by a fixed ratio, giving harmonious heading and body sizes across a design.

Which ratio should I use?

Smaller ratios like 1.125 or 1.2 suit dense interfaces, while larger ones like 1.333 or the golden ratio (1.618) create dramatic contrast for marketing pages.

Are the sizes generated locally?

Yes — the whole scale and its CSS are computed in your browser with no network calls.

Type Scale Generator

Build a modular typographic scale and copy the CSS.

Type scale generator

Create a modular typographic scale from a base size and a ratio. The tool shows each step in both pixels and rem, previews the actual size, and gives you copy-ready CSS custom properties like --step-3.

A consistent scale keeps headings, body text and captions visually balanced — generated instantly and privately in your browser.