# Website Design Analyzer for Typography Hierarchy

[Open the live Fudge conversation](https://design.withfudge.com/share/website-design-analyzer-for-typography-hierarchy)

Last updated: 2026-08-25

A website design analyzer for typography hierarchy should show how a page separates headings, body copy, labels, navigation, and supporting text through font family, size, weight, line height, and color. The practical result is a type system you can test on your own pages instead of copying isolated text styles.

## Build the hierarchy from roles

Start by listing the jobs typography performs on the page:

- **Display or hero text:** creates the first visual priority.
- **Section headings:** introduce a new idea or content group.
- **Body text:** carries the explanation and should remain easy to scan.
- **Labels and navigation:** support movement and interface decisions.
- **Metadata:** adds context without competing with the main content.
- **Emphasis text:** uses weight, color, or a supporting face for focus.

For each role, record the family, approximate size, weight, line height, casing, color, and width. Compare roles rather than collecting font names. A heading that uses the same family as body copy may still feel distinct because of size, weight, tracking, and line height.

The captured Linear reference is useful for separating primary and supporting choices. It lists Inter Variable, Berkeley Mono, and Tiempos Headline. Treat those as observed details from the supplied capture, not as proof that every Linear page uses the same combination.

## 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.

## Identify what creates contrast

A strong hierarchy usually depends on several small differences working together. Check these in order:

1. **Size:** Is the heading clearly larger, or only slightly larger?
2. **Weight:** Are headings heavier than body copy, or does the page rely on color?
3. **Line height:** Does compact display text contrast with more open reading text?
4. **Width:** Do headings use a narrower measure than paragraphs?
5. **Color:** Are metadata and secondary labels visibly quieter?
6. **Family:** Is a mono or serif face reserved for code, editorial moments, or special emphasis?

Do not assume every visible difference means a different font. One variable sans family can create several levels through weight and size alone. A mono face may be a supporting detail rather than a second primary type system.

Use the same method when comparing two pages. Mark each observation as visible on the captured page, inferred from repeated use, or still unverified. This prevents one heading, button, or screenshot from being treated as the complete site-wide system.

## Test the hierarchy in real content

Replace the reference copy with your own long heading, short heading, paragraph, button label, and metadata row. This reveals whether the hierarchy works beyond the original page. Check wrapping, line length, baseline alignment, and the distance between text blocks.

A useful hierarchy remains recognizable without color. View the page in grayscale or reduce contrast temporarily. If headings, body copy, and supporting labels still have clear roles, the structure is doing real work. If everything depends on a subtle gray difference, adjust size, weight, or spacing before adding more colors.

Check responsive behavior as well. A large display style may need a smaller size and tighter line height on narrow screens. Body copy should retain a comfortable measure when the page becomes dense. Navigation labels and buttons should remain readable without awkward wrapping.

## A repeatable analysis checklist

Use this process for any captured site:

1. List every visible text role.
2. Group styles that appear to serve the same job.
3. Record family and variant before judging visual hierarchy.
4. Compare size, weight, line height, measure, and color.
5. Test the styles with your own content.
6. Check grayscale and narrow-width behavior.
7. Keep exceptions separate from the core type scale.

The supplied Linear reference demonstrates why primary interface text and supporting typefaces should be documented separately. Use the observed result as a reference, then verify the relevant fonts and variants before shipping a design. If you only have an image, describe the family as a visual match until the actual font file or page inspection confirms it.

## Use this in your AI agent

> Analyze this captured website's typography hierarchy. Identify the roles for display text, headings, body copy, navigation, labels, metadata, and emphasis. For each role, return the observed font family, variant, size, weight, line height, color, casing, and measure when available. Explain which differences create hierarchy, identify supporting typefaces separately, label uncertain conclusions, and test the recommendations against long and short sample content at desktop and narrow widths.

[Install Fudge for your AI agent](/mcp) to inspect captured references and compare their type roles as you design.

---

Look for repeated letter shapes and check the roles where the visual voice changes. Body copy, navigation, labels, and buttons often share a primary sans family. A mono face may appear in code, technical labels, or small data elements. A serif or display face may be limited to hero text or editorial sections.

Do not decide from appearance alone. Compare the font files, variants, weights, and actual usage across the page. A single variable family can look very different at 400, 500, and 700 weight, especially when size and line height also change.

Then test distinctive characters such as lowercase "a," "g," numerals, punctuation, and capital "R." If the family changes only in one special role, document it as a supporting choice rather than treating the page as two equal type systems. The supplied Linear reference is useful because its listed faces have different documented roles: a primary interface face, a monospace support face, and an occasional editorial display face.

Finally, compare more than one page type if possible. A family that appears in navigation, body copy, and controls is better evidence of broad usage than a single matching headline.

---

Yes. Convert the observed roles into a small scale instead of copying every text size. A starting structure might include display, heading large, heading small, body, label, and metadata. For each level, define size, weight, line height, and maximum measure.

Use real content to validate it. Test a long hero heading, a two-line section heading, a paragraph of several sentences, a compact button label, and a metadata row. If one level wraps too early or loses priority, adjust the measure or line height before adding another size.

Keep the core scale stable and handle special cases separately. A promotional hero, code sample, or editorial quote may need an exception, but it should be clearly named and limited. Check the scale at narrow widths and in grayscale so the hierarchy does not depend entirely on color or a single screenshot.

Record which values came from observation and which values are your recommendation. That makes later revisions easier when the actual font files, viewport, or content changes.

## Related questions

- [Analyze Border Radii and Shadows from a Live Website](/share/analyze-border-radii-and-shadows-from-a-live-website)
- [Website Design Analyzer for Spacing Scale](/share/website-design-analyzer-for-spacing-scale)
- [Analyze Color Roles from a Live Website](/share/analyze-color-roles-from-a-live-website)
- [Website design analyzer for page layout](/share/website-design-analyzer-for-page-layout)