Font sizes picked one at a time, 14px here, 22px there, 28px for that other heading, tend to end up inconsistent. Not because anyone chose badly, but because nothing connected the choices. A modular scale fixes that by generating every size from one number and one ratio, so each step relates to every other step on purpose.
What a modular scale actually is
Pick a base size, usually your body text, 16px is standard, and a ratio. Multiply up from the base to get each larger step, divide down for each smaller one. The result is a set of sizes that share the same mathematical relationship, which is why a modular scale looks coherent before you've applied any other styling at all.
This replaces the alternative, where every heading level is its own arbitrary decision. Adding a new heading level becomes picking the next step on the scale, not making a fresh judgment call.
Choosing a ratio
The ratio controls how dramatic the jump between steps feels. A few common ones:
- 1.125 (major second): subtle, tight steps. Good for dense, content-heavy interfaces like dashboards and docs, where you need several hierarchy levels without huge size jumps.
- 1.2 (minor third): a safe general-purpose default. Enough contrast to read as hierarchy, restrained enough not to dominate a layout.
- 1.25 (major third): common for marketing sites and blogs. Clearer jumps between heading levels than 1.2, without going dramatic.
- 1.333 (perfect fourth): noticeably bolder steps. Works well where headlines need real visual weight, like landing pages.
- 1.618 (golden ratio): the most dramatic common option, best reserved for hero-heavy pages with very few text levels since the jump from H2 to H1 gets large fast.
Rule of thumb: the more text-dense the interface, the smaller the ratio should be. Dashboards and docs want 1.125 to 1.2. Marketing pages and hero sections can support 1.25 to 1.333.
Worked example
Base size 16px, ratio 1.25, each step rounded to the nearest whole pixel:
- Body: 16px
- Small heading (h4): 20px
- h3: 25px
- h2: 31px
- h1: 39px
- Display / hero: 49px
Every number here is 16 × 1.25ⁿ for some step n. Nothing was chosen by eye. That's the entire point: if the base or ratio changes later, every size updates in relation to every other size, instead of six separate manual edits.
Line-height is its own decision
A modular scale controls font-size. Line-height needs separate logic: larger text generally wants a tighter line-height ratio (a 49px display line at 1.5 line-height looks loose), while small body text wants a slightly more generous one for readability. Treat line-height as related to the scale, not something that scales at the same rate as font-size.
Don't let the scale undercut readability
Whatever ratio you pick, don't let the smallest step drop below 14 to 16px for anything meant to be read as body text. A mathematically clean scale that produces 12px paragraph text is still a readability problem. The system should serve the content, not the other way around.
Generate it instead of calculating by hand
Once you've settled on a base and a ratio, the Typography Builder generates the full scale instantly and lets you preview it against real content before committing to it in code. Already picked a font pairing? Bring both into the same place with the Design Language Studio, since type scale and font pairing are really one decision, not two.
See also: how to pair fonts that work together.
