Guide · 10 min read

Modular scale: two numbers instead of twenty decisions

Every hand-picked font size is a decision nobody documented, and decisions that aren't documented drift. A modular scale replaces them with a base, a ratio, and a rule — then gets out of your way.

Where the idea comes from

Modular scales in typography borrow directly from music. Just as an octave is a 2:1 frequency ratio and a perfect fifth is 3:2, a typographic scale steps up by a fixed ratio: 4:3 (perfect fourth, 1.333), 3:2 (perfect fifth, 1.5), and so on. Renaissance printers used these proportions to set type that felt related across sizes; the practice was revived on the web because it solves the same problem — making twelve sizes look like they belong to one family.

The formula is the whole system:

size = base × ratio^step

Generate yours with the type scale calculator — pick a base and a ratio, and every step follows.

Choosing the base

The base is your body copy, and it is the one number that should not be negotiable per-page.

• 16px is the floor. It is the default in most browsers for good historical reasons, and it is the size most users never change.
• 17–18px reads better for long articles and documentation. The cost is more vertical space; the benefit is measurably less fatigue.
• Below 16px for body copy is almost always a mistake, however elegant it looks in a mockup on a large display.

Express the base in absolute terms once, then work in rem everywhere else so that users who raise their browser default get a proportional result rather than a broken layout.

Ratio: the personality dial

Ratio	Name	Feels like
1.067	Minor second	Flat, dense, technical
1.125	Major second	Compact, app-like
1.200	Minor third	Balanced, common default
1.250	Major third	Clear hierarchy, safe
1.333	Perfect fourth	Confident, editorial
1.500	Perfect fifth	Dramatic
1.618	Golden ratio	Display only, in practice

The honest summary: most products land between 1.2 and 1.333. Below that, headings stop reading as headings; above it, the top of the scale runs away from you on anything but a marketing page.

Line height is not part of the scale

A scale gives you sizes. Spacing is a separate decision, and it should move in the opposite direction: as type gets larger, line height gets tighter.

• Body copy: 1.5 to 1.7. Below about 1.45, lines become hard to track back across.
• Headings: 1.1 to 1.25. A 48px heading at 1.6 has a gap so wide it stops belonging to the text beneath it.
• Short UI labels: 1.2 to 1.4, which also gives interactive elements a comfortable hit area.

Measure: the constraint people forget

Line length and type size are coupled. The classical guidance — 45 to 75 characters per line, with around 66 often cited as the sweet spot — is about eye travel: too short and the eye resets constantly, too long and it loses the start of the next line.

This is why simply enlarging body text can make a page harder to read. If you raise the base from 16px to 18px inside a fixed-width column, your measure drops and the rhythm changes. Either widen the column, or accept the shift deliberately.

Making it fluid

A fixed scale is awkward across a 360px phone and a 1600px monitor. The modern answer is clamp(), which interpolates between a minimum and maximum using a preferred value tied to viewport width:

font-size: clamp(1rem, 0.875rem + 0.6vw, 1.25rem);

Three rules keep fluid type from becoming chaotic:

1. Only fluidify the top of the scale. Body copy should usually stay fixed — users came for readable text, not for text that grows when they resize. Let headings and display sizes breathe.
2. Derive the min and max from the same scale. Compute your scale at a small base and a large base, then clamp between the two corresponding steps. Otherwise your ratio quietly changes with viewport width, which is the whole thing you were trying to avoid.
3. Always include a rem component in the preferred value. A preferred value expressed purely in vw breaks browser zoom for users who need it.

A practical implementation

Define the scale once as custom properties, and let components reference tokens rather than raw values:

:root {
  --scale-base: 1rem;
  --scale-ratio: 1.25;
  --step-1: calc(var(--scale-base) / var(--scale-ratio));
  --step-2: var(--scale-base);
  --step-3: calc(var(--scale-base) * var(--scale-ratio));
  --step-4: calc(var(--step-3) * var(--scale-ratio));
}

Now a brand refresh is two numbers instead of a search-and-replace across forty files. And because everything is expressed in rem, a user with a 20px browser default gets the entire system scaled up proportionally.

Mistakes worth avoiding

• Rounding every step to a whole pixel. It feels tidier and quietly destroys the ratio. Keep the decimals.
• Using a display ratio for a dense app. 1.618 at five steps produces a 180px heading; nothing in a settings screen needs that.
• Scaling down instead of up. Starting from a huge display size and dividing down often produces a body size below 16px. Always anchor at the base.
• Forgetting contrast at the top end. Large light-grey headings on white are a classic 3:1 failure. Check them with the contrast checker.

---

Scale maths: size = base × ratio^step. Guidance on measure reflects long-standing typographic practice rather than a formal specification; adapt it to your typeface, script and audience.