Typographic Modular Scale

Modular scale typography

Think of a modular scale as a series of font sizes where each step is the previous one times some fixed ratio: sizeₙ = base × ratioⁿ. Start at 16px with a ratio of 1.25 and the sequence runs 16, 20, 25, 31.25, 39.0625… The sizes relate to one another the way musical intervals do, and that is a big part of why they feel harmonious. Robert Bringhurst argued for the approach in The Elements of Typographic Style, and Tim Brown's Type Network tools later brought it to the web.

Most of the ratios you'll run into take their names from music. There's Minor Third 1.2, Major Third 1.25, Perfect Fourth 1.333, Augmented Fourth 1.414 and Perfect Fifth 1.5, along with the Golden Ratio φ = 1.618. Type Scale (type-scale.com), Modularscale.com and Utopia ship with these presets, so you can try a scale out before committing to it.

Applications

In a dense interface that stacks a lot of heading levels, keep the ratio tight, somewhere around 1.2–1.25. Marketing pages flip the logic, since the headline needs to own the hero, so a wider 1.414–1.618 earns its keep. The scale doesn't have to stop at type either. Run it through spacing, line-height and component sizes and the same rhythm carries across the whole design system.

FAQ

Which ratio should I pick? SaaS dashboards tend to work well at 1.2–1.25, which keeps the hierarchy compact. Editorial work and landing pages do better at 1.333–1.5, where the headlines get room to breathe. Whatever you pick, test it in context first.

How many steps do I need? Six to eight is usually enough for h1…h6, body and small. If you need sizes for captions and legal copy, generate another two or three below the base.

Why is φ popular? The golden ratio (1.618) opens up dramatic jumps between sizes. Great for editorial design, but in a UI it can come off as overdone, which is why a lot of designers settle on Perfect Fourth (1.333) instead.