visual design
Typographic scale
What is a typographic (modular) scale?
A typographic scale is a sequence of font sizes built from one base size and a single multiplier, with each step scaling the base by that ratio. This consistent relationship creates a visual hierarchy that feels intentional and balanced, rather than random.
Also known as: typographic scale, type scale, modular scale, typographic hierarchy ratio
Prefer to watch?
Watch the recap 0:30
The demo
A whole type hierarchy from two choices. Drag the base size and the ratio, and watch every level re-scale together - because each one is just the ratio applied again.
What this demo shows (text version)
Two sliders set a base font size and a ratio. A stack of sample text - a small caption, body copy, and several heading levels - is then sized by the modular scale: each level up is the previous size multiplied by the ratio. As you drag the ratio up, the headings pull dramatically away from the body; drag it down and the levels settle close together. Each size is shown in pixels.
The point is that a single ratio governs the entire hierarchy, so the sizes always relate to one another and feel like a deliberate set rather than random picks. Larger ratios give bold, high-contrast hierarchy (but can shout and eat space); smaller ratios are calm and compact (but risk levels too close to distinguish). The exact number matters less than that everything shares it.
A type scale reduces 'choose font sizes' to two choices: a base size and a ratio. Larger ratios produce bold, contrasting hierarchy; smaller ones feel more subtle and calm. What matters isn’t the exact values - it’s that they’re connected through a shared ratio, making the scale feel like a musical key. You can see and try this concept in action on this page.
Drag the ratio and the whole hierarchy breathed in and out as one - headings pulling away from the body at a big ratio, settling close at a small one - because every size is the same ratio applied again. That's a modular scale: one number choosing all your sizes, so they always feel like a set.
A scale is base × ratio, stepped. From a base (say 16px) and a ratio (say 1.25), each step multiplies again: 16, 20, 25, 31, 39… Common ratios borrow from music and classical proportion - the minor third (1.2), the perfect fourth (1.333), the golden ratio (1.618) - but any consistent ratio works; consistency is the magic, not the specific number.
The ratio sets the personality. A large ratio creates strong contrast between levels - bold, editorial, dramatic - but can feel shouty and eat space on small screens. A small ratio is subtle and space-efficient but risks levels that are too close to tell apart. Pick the ratio to match the tone and the screen, then let it decide every size.
A scale gives you the sizes; it doesn't excuse skipping the craft. Round values to sensible pixels, check that adjacent steps are actually distinguishable, mind line height and measure at each size, and consider a gentler ratio on mobile. The scale is a starting grid, not a law - nudge a step when legibility needs it.
A typographic scale gives your text hierarchy rhythm and intention - try building one interactively on this page. The magic isn’t in the numbers, but in the consistent ratio that makes each size feel connected - see it in action in our demo.
A typographic scale isn't just about picking sizes - it's about choosing one base and one ratio to generate all steps, creating harmony through consistent relationships. You can see and try this concept in action on this page, where you’ll build your own scale by adjusting base size and ratio to feel the visual rhythm it creates.