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
H1 — 4xl (4.214rem / 67.4px)
H2 — 3xl (3.16rem / 50.6px)
H3 — 2xl (2.37rem / 37.9px)
H4 — xl (1.778rem / 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
Set your base font size and modular scale ratio.
Review how each heading level scales relative to body text.
Adjust the number of scale steps to match your design system.
Preview with sample headline and paragraph content.
Read Typography Hierarchy for principles behind heading levels.
Frequently asked questions
How many heading levels should a website use?
Most web 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
Custom Type Engineering
Need a custom brand typeface or complete typography system?
Goafreet crafts bespoke Latin and Indic typefaces, authorized script extensions, and corporate font governance for modern digital brands.