Type scale

A modular type scale derives every font size from a single ratio applied to a base size. The discipline is choosing the ratio for the system's typical surface — UI density, editorial reading, marketing impact — then committing to it across the whole scale rather than per-role.

When to use

• Designing a new typography scale from a base font size and a context (product UI / editorial / marketing).
• Auditing an existing scale where sizes feel off-rhythm or step gaps look inconsistent.
• Extending a scale up or down (e.g. adding a display rung above the existing max).
• Code review: flag hand-picked sizes outside a modular ratio, ratios above 1.5 in product systems, or rems-as-source-of-truth (always derive rem from rounded px, not the other way around).

When NOT to use

• Editorial-only books / long-form prose where the ratio is a typographer's pick and a modular scale would over-constrain. The discipline still applies to documenting the choices, not to forcing a ratio.
• Single-size systems (rare; usually a stopgap during initial system definition).

Canonical preset ratios

Upper bound: ratios above 1.5 rarely work for product UI — by step +5 the size is huge, and H4/H5 stop feeling distinct from body. Reserve 1.5 / 1.618 for editorial or marketing systems.

Stops-up / stops-down

A common default range is step −2 to step +8. Step 0 is the base size.

size(n) = round(base × ratio^n)
rem(n)  = size(n) / 16

Typical role mapping for a 16 px base, 1.200 ratio:

The range is generous so a single scale spans dense UI through marketing without per-surface forking.

Rounding rules

Round font sizes to integer px by default:

1. Compute the raw size: base × ratio^n.
2. Round to the nearest integer px. Sub-pixel sizes render inconsistently across browsers and OS hinting.
3. If two adjacent steps would round to the same px, bump the larger one up by 1 px to preserve monotonic spacing.
4. Derive rem from the rounded px, not from the raw value. rem = rounded_px / 16. The other direction (round the rem) compounds with the px round and produces drift.

Rounding can be disabled for math-pure systems where fractional sizes are tolerated downstream. Document the choice if you turn it off.

Verification

After picking a ratio and emitting the scale:

1. Monotonicity: every step is strictly larger than the previous; no two adjacent steps share a px value after rounding.
2. Round-trip: rem(n) × 16 = px(n) exactly (no drift from re-rounding).
3. Distinguishability at small sizes: −1 and −2 are visually distinct (a ratio + base combo where they round to the same px is broken; pick a tighter ratio or larger base).
4. Upper-bound sanity: if the +5 step is unusable for headings in your system, the ratio is too aggressive; drop to a tighter preset.

Cross-references

• Routed here by: designing-a-design-system — the L1 dispatcher for building or extending a system.
• REQUIRED BACKGROUND: line-height-grid — every size in the scale needs a line-height; the lh-ui (× 1.20) / lh-prose (× 1.50) tracks pair with this scale.
• For role assignment after picking sizes: the typography-styles spec (compound tokens combining size + lh + tracking + weight + paragraph margin).
• For the base size choice: 16 px is the common base; smaller bases (14 px) are valid for dense product UI but require revisiting line-heights and tap targets.

Sources

• Modular Scale by Tim Brown — interactive picker for the canonical ratios.
• Type Scale — same idea with live preview.
• One worked instantiation: the UDTS typography foundations (its L2 skills are incubating in thrillmade/tokenomics).