Typography hierarchy is the planned scale of type on a website: page heading, section headings, body, and supporting labels. Size, weight, spacing, and line length tell people what to read first and what is secondary. Extra font families do not create hierarchy; they usually break it.
Visual hierarchy includes images and colour. This guide is the type system only. Contrast and heading markup also sit under accessibility.
A scale, not a pile of sizes
A company site needs a short scale that repeats on every page:
- Page heading (one per page): the topic. Largest size, used once.
- Section heading: a new question or block. Clearly smaller than the page heading, clearly larger than body.
- Body: the reading size. Comfortable line length (about 60 to 75 characters) and line height that does not collide.
- Label or meta: dates, captions, form labels. Smaller or lighter, still readable.
Do not invent a new size for every block. If a homepage teaser and a service heading use the same role, they share the same style.
Weight and case are part of the scale. All-caps labels can work in small doses. All-caps body text does not. Italic is for emphasis inside a sentence, not for a whole paragraph.
One type family (with its italic and bold) is enough for most business sites. A second family is a choice, not a requirement. Three families on one page usually mean the scale was never defined.
Headings that match the document
The visual size must match the document outline. A page has one h1. Section titles are h2, then h3 if a section truly nests. Styling a paragraph to look like a heading without using a heading element hides the outline from assistive technology and from retrieval systems.
Write headings as titles a person would use to scan: “What we host,” not “Our approach to excellence.” The UI vs UX split applies: a beautiful heading that does not name the section fails the task.
Checking type on a real page
- List the roles: page heading, section, body, label
- Assign one size and weight to each role
- Confirm one page heading and a logical heading outline
- Read a body paragraph at the live width; shorten the measure if lines run on
- Check the same scale on a phone, where the heading must still fit two lines
Body text and small print
Body text does the work. If it is light grey on white, hierarchy has been confused with “subtle.” If it is a wide line across a 1,400-pixel container, people lose their place.
Captions and legal lines can be smaller, not unreadably small. A footer that is 11px light grey fails both hierarchy and contrast.
Links in body text need an underline or a contrast that does not rely on colour alone. A heading that is also a link should still look like a heading first.
On a homepage, the page heading can be short. Do not compensate by shrinking body copy so more slogans fit. Cut words.
A practical example
A service page uses a decorative script for the page title, bold sans for cards, a third font for quotes, and body text at 14px across the full container. Visitors skip to the form because nothing reads as a section. The revision keeps one sans family, a large page title, section titles at a shared size, 18px body on a limited measure, and quotes in the same family at a larger weight. The script font is removed.
Key takeaways
- Hierarchy is a short, repeated scale: page, section, body, label.
- One family is enough; extra fonts are not extra rank.
- Visual size must match the heading outline.
- Body text needs contrast and a readable line length.
FAQ
How large should the page heading be?
Large enough to be the first thing you can name when you blur the page, and short enough to fit about two lines on a laptop. If it needs four lines, the heading is a paragraph.
Can we use the brand font for body text?
Yes if it stays readable at body size, including on a phone. Many display fonts are for headings only.
Do we need a different scale for the blog?
The roles stay the same. Article pages can give body a little more measure and spacing because people read longer. They should not invent a fourth family.