How to Check Typography Hierarchy on a Website

To check a website's typography hierarchy, identify the text roles first, then compare size, weight, line height, casing, and color within each role. A useful hierarchy makes the next action clear: visitors should recognize the page title, section headings, supporting copy, labels, and controls without reading every word.

Start with text roles

Review a representative page and list each distinct role:

• Page title or hero heading
• Section heading
• Card or feature heading
• Body copy
• Navigation and utility labels
• Button and form text
• Captions, metadata, or helper text
• Display or editorial text, if present
• Code or technical text, if present

Do not treat every different size as a new role. A responsive version, a longer heading, or a highlighted word may change appearance without changing its job. Record the role, where it appears, and what it needs to communicate.

Measure the useful differences

For each role, record the font family, size, weight, line height, letter spacing, casing, and color. Exact CSS values are best when available. If you are working from a capture, use estimates and label them as estimates.

Look for relationships rather than isolated numbers:

• Is the page title visibly larger than section headings?
• Are section headings heavier, darker, or both?
• Is body copy easier to scan because its line height is more generous?
• Do buttons and navigation use the same family as body copy?
• Are labels differentiated by weight, size, casing, or color?
• Does monospace or an editorial face have a specific job?

The captured Linear typography example lists Inter Variable as the primary sans serif, Berkeley Mono as supporting monospace, and Tiempos Headline as an occasional editorial display face. This is evidence of role-based variety, not a rule that every website needs three typefaces.

Check the reading path

Ignore the text meaning briefly and scan the page as shapes. What do you notice first? Where does your eye move next? Can you distinguish a section heading from a card heading? Does supporting copy remain subordinate without becoming too faint or too small?

Check long headings at the actual viewport width. A title that looks strong on one line may become awkward when it wraps to three lines. Note its maximum width, line height, and spacing below it. Check the same role on mobile, where a smaller size or tighter width may change the balance.

Then compare repeated components. If card headings use different sizes or weights without a clear reason, the system may be inconsistent. If they share a pattern while hero text is intentionally different, document that as a deliberate level.

Create a hierarchy worksheet

Use a table like this:

After filling it in, ask: Can a reader find the page topic in two seconds? Can they scan the main sections? Can they tell interactive text from supporting text? If any answer is no, adjust the relationship between roles rather than increasing every font size.

Use the captured example to compare how a compact interface uses type, muted color, and weight to create contrast. Verify exact values before treating them as a production standard.

Use this in your AI agent

> Check the typography hierarchy on this captured website. List the text roles, observed font families, sizes, weights, line heights, casing, colors, and likely uses. Compare desktop and mobile states where available, explain the reading path, flag inconsistent repeated components, and separate verified observations from estimates. Return a concise hierarchy worksheet for a redesign.

Install Fudge for your AI agent

Use as few levels as the page needs to make content easy to scan. A practical starting point is one page-title level, one or two section-heading levels, one body size, one small supporting size, and dedicated control or label styles only when their job requires a distinction. The exact count depends on the page, so repetition and reading order matter more than a fixed number.

For weights, begin with regular body text and one stronger weight for headings or emphasis. Add a medium weight for controls only if it improves clarity or matches a repeated pattern. Too many nearby weights can make the hierarchy harder to see.

Check the result at real content lengths. If every heading is large and bold, none feels like the main entry point. If labels are tiny and low contrast, the interface becomes difficult to scan. Keep the strongest combination of size, weight, and color for the most important role, then step down clearly for supporting roles.

Compare equivalent roles, not arbitrary text samples. Match page title to page title, section heading to section heading, body copy to body copy, and controls to controls. Record each role's family, size, weight, line height, color, maximum line width, and spacing around it.

Then compare the reading path. Which page topic is easiest to find? Which site makes sections easier to scan? Which body text supports longer reading? Note whether each difference comes from type itself or from layout, contrast, and spacing.

Keep the comparison fair by checking similar viewport widths and content lengths. If one site uses a display face only for hero headings while the rest uses a sans serif, record that as a role difference rather than calling the whole system more complex. The captured Linear example shows how one page can combine a primary sans serif with supporting monospace and editorial display roles. Use that role mapping to explain differences precisely.

Related questions

• Inspect a website's border radii and shadows from its URL
• How to Check a Website's Spacing Scale
• Inspect a website's color roles from its URL
• How to Check Page Layout on Any Website