# Inspect a Website's Typography Hierarchy from a URL

[Open the live Fudge conversation](https://design.withfudge.com/share/inspect-website-typography-hierarchy-from-a-url)

Last updated: 2026-08-25

To inspect a website's typography hierarchy from a URL, map each visible text role to its family, size, weight, line height, and purpose. Then compare the roles in order: display text, headings, body copy, labels, navigation, buttons, and any code or editorial text. The goal is to understand how the page creates emphasis and readability, not merely to collect font names.

## Start with a role map

Inspect the page's most important screen, usually the homepage or a key landing page. Record the typography in this order:

1. **Display text:** Note the largest statement, its family, size, weight, line height, casing, width, and visual purpose.
2. **Headings:** Compare the main heading, section headings, and card headings. Look for a consistent scale and deliberate changes between sections.
3. **Body text:** Check paragraph size, line length, line height, and color. These choices often affect readability more than the family alone.
4. **Interface text:** Inspect navigation, buttons, tabs, metadata, form labels, and helper text. These reveal how the system handles small sizes and emphasis.
5. **Special roles:** Look for monospace, serif, italic, condensed, or uppercase text used for code, editorial moments, labels, or product data.

The captured Linear reference demonstrates why roles matter. It lists Inter Variable, Berkeley Mono, and Tiempos Headline, while the notes identify Inter Variable as the primary sans serif, Berkeley Mono as a supporting monospace face, and Tiempos Headline as an occasional editorial display face. This is an observation from the captured page, not a universal recommendation.

## Captured pages

[![Linear typography](https://pin.fontofweb.com/4902?format=jpg)](https://design.withfudge.com/share/pin-4902)

[Linear typography](https://design.withfudge.com/share/pin-4902)

## Fonts captured on linear.app

- **Inter Variable** — weight 400 · Primary sans serif in the captured Linear typography system.
- **Berkeley Mono** — Supporting monospace typeface in the captured system.
- **Tiempos Headline** — An occasional editorial display face in the captured system.

## Compare roles, not isolated names

| Role | Family | Weight | Size and spacing | What to check |
| --- | --- | --- | --- | --- |
| Display | Primary or display face | Bold or semibold | Largest scale and leading | Does it carry the main idea? |
| Heading | Primary or secondary face | Semibold to bold | Clear step below display | Are sections easy to scan? |
| Body | Reading face | Regular | Comfortable line height | Can paragraphs be read quickly? |
| Label | Interface face | Medium or semibold | Smaller size and tighter spacing | Is emphasis still clear? |
| Code or data | Monospace or alternate face | Regular or medium | Often compact | Is the role visually distinct? |

Check whether the hierarchy survives at a smaller viewport. A heading that balances on desktop may wrap badly on mobile. Buttons may need more spacing or a heavier weight than nearby body text. A style used once should not automatically become a new system role.

## Turn the review into design decisions

Use these questions before adapting a pattern:

- Can you explain the job of every family?
- Are display, heading, body, and label sizes visibly distinct?
- Does weight create emphasis without making every element loud?
- Does line height support reading at each size?
- Are headings narrower than body copy where appropriate?
- Do repeated components use consistent type rules?
- Does the hierarchy still work when the exact family is unavailable?
- Are alternate faces limited to meaningful roles?

For a repeatable review, save one captured reference and record the family, role, size, weight, line height, and evidence for every style. Compare the same roles across several pages instead of collecting unrelated names. Keep observed details separate from adaptations, since your content, language, viewport, and available fonts may require different choices.

## Use this in your AI agent

> Inspect the typography hierarchy of this website from its URL. Identify display, heading, body, navigation, button, label, code, and editorial roles. For each role, report the observed family, available variant or weight, approximate size, line height, casing, width, and location. Summarize the type scale, identify primary and supporting roles, flag inconsistent patterns, and give me a checklist for adapting the hierarchy without presenting unsupported details as facts.

[Use Fudge with your AI agent](/mcp) to run this typography review against captured website references.

---

Use the same role checklist for every website. Record the display face, heading face, body face, interface text, special face, approximate scale, weight range, line height, and visual job of each role.

Compare decisions rather than popularity:

- Which site creates the clearest distinction between display and body text?
- Which system uses the fewest families while still separating technical or editorial content?
- Which hierarchy remains readable at small sizes?
- Which site uses weight and spacing effectively instead of adding more faces?
- Which patterns repeat across navigation, cards, forms, and buttons?

Keep separate columns for **observed** and **adaptable**. Observed means what appears on the reference page. Adaptable means what you could test in your own product after accounting for content, language, viewport sizes, and available fonts.

The captured Linear example is useful because its roles include Inter Variable, Berkeley Mono, and Tiempos Headline. Compare how those roles are assigned rather than assuming you need the same combination.

---

Ask for a structured review that separates evidence from recommendations. Begin with a short hierarchy summary, then list each role with its observed family, variant, size, weight, line height, casing, color, and location on the page.

Request four practical outputs:

1. A type scale showing the relative steps from display text to labels.
2. A role map explaining why each family appears and whether it is essential or occasional.
3. A risk list covering small text, long headings, mobile wrapping, missing weights, and fallback behavior.
4. A starter system with suggested CSS variables or design tokens clearly labeled as adaptations, not facts about the source site.

You can also ask the agent to compare captured pages using identical role names, flag differences that affect hierarchy, and recommend which patterns to test first. If a family or variant cannot be verified, require an uncertainty label instead of a guess.

## Related questions

- [Show websites using fonts similar to my reference](/share/show-websites-using-fonts-similar-to-my-reference)
- [How to Inspect Font Pairings on Websites](/share/inspect-font-pairings-used-on-real-websites)
- [Find Similar Fonts With a Free License Filter](/share/similar-font-finder-with-free-license-filter)
- [How to Identify the Fonts Used on a Website](/share/identify-fonts-used-on-a-website-from-its-url)