CSS Modular Typography Scale Generator
Modular type scales give your typography mathematical harmony. Pick a base size and ratio (1.125 = major second, 1.25 = major third, 1.5 = perfect fifth, 1.618 = golden ratio); the tool generates sizes for h1-h6 plus body text. Output as CSS custom properties.
How to use the CSS Modular Typography Scale Generator
Set a base size (usually 16px) and pick a ratio. The tool multiplies up from the base to size h1–h6 and down for small text, and outputs the scale as CSS custom properties. A bigger ratio gives more dramatic size jumps.
Sizing type with a modular scale
A modular type scale picks a base size and a ratio, then derives every other size by repeatedly multiplying. Borrowed from musical intervals — a major third is 1.25, a perfect fifth 1.5, the golden ratio 1.618 — the approach gives headings and body text a consistent rhythm instead of a pile of arbitrary pixel values. A larger ratio yields bolder contrast between levels; a smaller one keeps them close.
Choose a base and ratio and this generates h1–h6 plus body sizes as CSS custom properties ready to drop into :root. To make those sizes fluid across viewports, wrap them with the clamp() calculator; to pull existing tokens out of a stylesheet for comparison, the CSS variable extractor.
Common use cases
- Design systems — define a coherent set of heading sizes from one ratio.
- Custom properties — export the scale straight into :root variables.
- Editorial layouts — use a larger ratio for dramatic headline contrast.
- App UI — pick a tight ratio for dense, readable interface text.
- Consistency — replace ad-hoc font sizes with a single system.