Skip to content
Typography Master

Hierarchy Preview

See how heading levels map to a modular type scale. Adjust base size and ratio to preview a realistic article hierarchy with body and caption text.

Hierarchy Preview

Category label

H1 — 4xl (4.209rem / 67.3px)

H2 — 3xl (3.157rem / 50.5px)

H3 — 2xl (2.369rem / 37.9px)

H4 — xl (1.777rem / 28.4px)

H5 — lg (1.333rem / 21.3px)

H6 — base (1rem / 16px)

Body text at the base step provides the primary reading experience. It should use comfortable line height and an optimal measure for sustained reading.

Caption — supplementary information in a smaller size (0.75rem)

What this hierarchy preview does

This hierarchy preview tool shows how h1 through h6 map to a modular type scale. Adjust base size and ratio to preview a realistic article hierarchy with body and caption text.

How to use it

  1. Set your base font size and modular scale ratio.
  2. Review how each heading level scales relative to body text.
  3. Adjust the number of scale steps to match your design system.
  4. Preview with sample headline and paragraph content.
  5. Read Typography Hierarchy for principles behind heading levels.

For deeper context, read the Typography Hierarchy chapter in the Typography Master guide.

Frequently asked questions

How many heading levels should a website use?
Most pages use h1 once for the page title, then h2 for major sections and h3 for subsections. Avoid skipping levels — each heading should represent a logical content outline.
What size should h1 be relative to body text?
On a Major Third scale (1.25), h1 is typically 3–4 steps above body text. On a Perfect Fourth (1.333), the jump is more dramatic. Preview both to match your brand tone.
Should heading sizes be fluid?
Hero h1 elements often benefit from fluid sizing with clamp(). Section headings (h2, h3) can use fixed scale steps from your token system for predictable layouts.

Related resources