What is a modular type scale?

A modular type scale multiplies a base font size by a fixed ratio at each level to produce a consistent set of heading and body sizes, typically defined as CSS custom properties.

What ratio should I use for a web type scale?

Common ratios include 1.25 (major third), 1.333 (perfect fourth), and 1.5 (perfect fifth). The perfect fourth (1.333) is a widely used starting point for clear hierarchy on screens.

How does type scale relate to font hierarchy?

Size is one hierarchy axis. When scale steps are large enough, headings become preattentive — visible before reading. Weight and spacing provide additional hierarchy cues.

Type Scale Guide — Font Hierarchy for CSS Typography

A type scale is a set of font sizes generated by multiplying a base size by a consistent ratio at each step. Instead of picking arbitrary px values, you get harmonious jumps: 1rem, 1.333rem, 1.777rem, 2.368rem using a perfect fourth (1.333).

Typography hierarchy is a perceptual shortcut. When heading and body sizes are too close — say 18px title against 16px body (1.125:1) — the reader must compare elements to determine rank. When the ratio exceeds roughly 2:1, structure registers before reading begins.

Common developer mistake

Setting h1 to 24px, h2 to 20px, and body to 16px produces a largest step of only 1.5:1. It passes a checklist but fails the glance test. The page title, section heading, and body feel like siblings.

Use a modular ratio (1.25, 1.333, 1.5) applied consistently across levels
Ensure the largest heading step is at least ~2:1 above body size
Define scale tokens in rem, not one-off px values per component

CSS type scale defaults

Start with 1rem body text and a 1.333 multiplier. Map h1–h4 to scale steps. Pair with font-weight 600 on headings and 400 on body so hierarchy works on two axes — size and weight.

Interactive lessons

Related guides

Glossary

Frequently asked questions

What is a modular type scale?: A modular type scale multiplies a base font size by a fixed ratio at each level to produce a consistent set of heading and body sizes, typically defined as CSS custom properties.
What ratio should I use for a web type scale?: Common ratios include 1.25 (major third), 1.333 (perfect fourth), and 1.5 (perfect fifth). The perfect fourth (1.333) is a widely used starting point for clear hierarchy on screens.
How does type scale relate to font hierarchy?: Size is one hierarchy axis. When scale steps are large enough, headings become preattentive — visible before reading. Weight and spacing provide additional hierarchy cues.