visual design
Typographic scale
What is a typographic (modular) scale?
A typographic scale is a set of font sizes generated from one base size and a single ratio, so each step up is the base multiplied by that ratio again and again. Choosing sizes by a consistent ratio - rather than picking numbers at random - is what makes a hierarchy feel harmonious instead of arbitrary.
Also known as: typographic scale, type scale, modular scale, typographic hierarchy ratio
Prefer to watch?
Watch the recap 0:44
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 turns "pick some font sizes" into one decision: a base size and a ratio. Bigger ratios give dramatic, high-contrast hierarchy; smaller ones feel tight and calm. The point isn't the exact numbers, it's that they all relate - a shared ratio makes the steps feel deliberate and harmonious, the way musical notes in a key do.
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.