Typographic scale

In one line: a typographic scale picks one base size and one ratio, then derives every other text size by multiplying — so your caption, body, and headings relate by math instead of by a pile of arbitrary pixel values.

What it is

A modular scale is a sequence of sizes generated from two inputs:

• Base — the size of your body text, the anchor everything else is measured against (16px is the conventional starting point).
• Ratio — the constant multiplier between adjacent steps. Step up and you multiply by the ratio; step down and you divide.

Pick a ratio borrowed from musical intervals and the result reads as harmonious rather than random. Common choices:

• 1.2 — minor third (subtle, dense UIs)
• 1.25 — major third (a reliable default)
• 1.333 — perfect fourth (clear editorial contrast)
• 1.5 — perfect fifth (bold, spacious)
• 1.618 — golden ratio (dramatic, display-led layouts)

Instead of inventing 14px, 15px, 19px, 23px ad hoc, every size falls on the scale, and the scale is described by just two numbers.

Why it matters

When sizes are chosen one at a time, a layout drifts: a heading that's almost but not quite double the body, a caption a hair too close to body text to register as secondary. The eye notices the near-misses even when the viewer can't name them.

A scale removes the guesswork. Hierarchy becomes a question of which step, not which pixel, so the relationships stay consistent across pages and across a team. And because the whole system is two numbers, retuning the feel of a product — tighter, bolder, more editorial — is a two-value edit, not a sweep through every rule.

See it

Tune the base and ratio controls in the rail and watch all seven steps recompute together. A larger ratio fans the sizes apart for dramatic contrast; a smaller one pulls them close for a calm, dense feel. The true computed value (px and rem) is printed beside every sample.

How it works

Each step is the base raised through the ratio by an exponent n, where n is how many steps away from body the role sits:

sizeₙ = base × ratioⁿ

Body is n = 0 (so it equals the base). Caption sits below at n = -1; headings climb n = 1, 2, 3…. With a 16px base and a 1.25 ratio, h2 (n = 3) is 16 × 1.25³ ≈ 31.3px.

Express the result in rem, not raw px. One rem equals the user's root font size (16px by default), so 1.95rem honors a reader who bumps their browser text up, where a hard 31.3px would ignore them. Convert by dividing px by 16.

A scale only fixes size — pair it with line-height to fix rhythm. Smaller text wants a looser line-height for readability (around 1.5 for body); large headings want a tighter one (around 1.1) so the lines don't drift apart. Line-height as a unitless multiplier scales with each step automatically.

Build it

Generate the scale once as custom properties, then reference the names. Here the body step uses clamp() so it grows fluidly between a small-screen and large-screen size while the rest of the scale stays fixed off the base.

:root {
  --ratio: 1.25;
  --text-base: 1rem; /* body, n = 0 */
 
  /* sizeₙ = base × ratioⁿ — precomputed in rem so the scale honors root size */
  --text-caption: 0.8rem; /* n = -1 */
  --text-h4: 1.25rem; /* n = 1 */
  --text-h3: 1.563rem; /* n = 2 */
  --text-h2: 1.953rem; /* n = 3 */
  --text-h1: 2.441rem; /* n = 4 */
  --text-display: 3.052rem; /* n = 5 */
}
 
body {
  /* One fluid step: body grows from 1rem to 1.125rem with the viewport. */
  font-size: clamp(var(--text-base), 0.95rem + 0.4vw, 1.125rem);
  line-height: 1.5; /* loose for readability at body size */
}
 
h1 {
  font-size: var(--text-h1);
  line-height: 1.1; /* tighter so large headings don't drift apart */
}
 
p {
  font-size: var(--text-base);
  line-height: 1.6;
}

Make it yours

• Try the same base at different ratios: 1.2 reads dense and utilitarian, 1.5 reads spacious and confident. Notice how the feel of the product shifts from two numbers.
• Drop the base to 14px and the whole scale shrinks proportionally — useful for data-heavy tools, but never take body below 16px (see below).
• Count how many steps you actually use. Most interfaces need five or six; generating ten and shipping all of them just invites inconsistency.

Reproduce it with an LLM

Pitfalls & accessibility

• Don't bolt a scale onto fixed line-heights. If line-height stays at 1.5px-style absolutes while sizes grow, large headings collapse; keep line-height unitless so it scales with each step.

Further reading

• Type Scale — a visual calculator
• Modular Scale
• Spencer Mortensen — The Typographic Scale
• MDN — line-height