Skip to content
Website glossary· Readable for everyone

What is typography hierarchy?

Typography hierarchy is the use of size, weight, colour and spacing to show which text matters most and in what order to read it.

Why it matters for a small business site

Most visitors scan before they read. Clear levels (headline, section headings, body text) let them find what they need quickly and see how the page is organised.

How to check yours

  1. Blur your eyes or zoom out: the headline should stand out first, then the section headings, then the body text.
  2. Check each heading level looks the same everywhere, with every section heading at one size and weight.
  3. Count the font families. Two is usually plenty.

What good looks like

One main heading per page, a few distinct heading sizes (each step roughly 1.25 to 1.6 times the one below is a common range), body text of at least 16px on phones, and headings used in order (H1, then H2, then H3) rather than picked for their look.

Common mistakes

  • Headings and body text so close in size that nothing stands out.
  • Three or more font families on one page.
  • Bold, colour and capitals all used for emphasis at once.
  • Skipping heading levels, or using heading tags just to make text big.
Free site audit

See how your current site does

The free audit measures the type on your first screen (the size steps between headings and body text, the line spacing, how many fonts load) and flags what’s off.

One page · the first screen · design, contrast, wording

Printed big on the certificate, with the site's address under it. Plain text — links are removed.

Free · no sign-up · one page, above the fold

This is the simple audit. Advanced audits check up to 20 pages, pages behind a login, and flows walked by AI — with an account on Pro.

Sign in for advanced audits