Inspect a Website's Typography Hierarchy from Its URL

To inspect a website's typography hierarchy from its URL, identify the text roles first, then record the family, variant, size, weight, line height, tracking, color role, and visual purpose for each role. Start with the heading, body copy, navigation, buttons, labels, metadata, and any code or editorial text. The goal is to understand the relationships between text styles, not to collect every text node.

Build the hierarchy first

List the visible levels of importance before looking for exact values:

Hierarchy is not just font size. Weight, color, width, line height, letter spacing, and surrounding space can all change emphasis. A smaller heading with stronger weight and generous spacing may attract more attention than a larger muted label.

The captured Linear example is useful as a reference. It lists Inter Variable as the primary sans serif, with Berkeley Mono and Tiempos Headline as supporting choices. Treat these as observations from the supplied capture. Inspect where each face appears before using the pattern in another interface.

Separate typeface roles from text roles

A site may use one family throughout its interface and reserve another for code, technical values, marketing headlines, or editorial sections. Record the family and its role together. For example, "Inter Variable for interface text" is more useful than simply recording "Inter."

Check the following:

• Family: the captured name and whether it is variable or static.
• Variant: regular, medium, semibold, bold, or display styles.
• Size and line height: compare controls with paragraphs.
• Width and tracking: note condensed labels, wide headings, or spaced uppercase text.
• Fallback behavior: record a different family only when its use is visible.

Do not assume a listed family is used everywhere. Verify it against visible text roles and the captured font file or variant when available.

Test the hierarchy across the page

Compare the hero, a section heading, a dense interface area, a card or list, and the footer. Look for stable relationships rather than identical values. A practical check is to view your notes in grayscale. If the order of importance disappears, the system may rely too heavily on color.

Then check a narrow viewport. Long headings may wrap, labels may need tighter tracking, and body line height may matter more than desktop size. Ask:

1. Can the main heading be identified within a second?
2. Are headings distinct from labels and body copy?
3. Do buttons look actionable without color alone?
4. Is secondary text quieter but still readable?
5. Does long text keep a comfortable line length?
6. Does the system remain coherent when text wraps?

Turn findings into implementation notes

Convert observations into named roles such as display, heading, body, label, caption, and code. For each role, record family, variant, size, weight, line height, color role, tracking, responsive changes, and one visible usage example. Include the captured page, viewport, and confidence level. Mark one-off or uncertain classifications clearly.

The result is an observed reference, not automatically the site's official design system. Validate it against additional pages, narrow layouts, and interactive states before treating it as a final rule set.

Use this in your AI agent

> Inspect the captured website at this URL for its typography hierarchy. Identify visible text roles such as display heading, section heading, body, label, navigation, button, metadata, and code. For each role, return the observed font family, variant, size, weight, line height, tracking, color role, and examples of where it appears. Separate repeated interface choices from one-off editorial treatments, compare responsive states when available, and finish with a concise type scale and implementation-ready role table. > > Install Fudge for your AI agent

Compare text in navigation, buttons, labels, paragraphs, headings, code-like values, and editorial sections. Verify the family attached to each captured use when that information is available. If the letter shapes and spacing match across interface roles, record one primary interface family. Do not classify a difference from size or weight alone, because the same family can look very different at display sizes or heavier weights.

A second family often has a clear job. Monospace text may support code or technical data. A serif or distinctive display face may separate editorial or marketing headlines. Record the result as primary interface family, supporting monospace family, display family, and uncertain cases. The supplied Linear capture lists Inter Variable, Berkeley Mono, and Tiempos Headline, but the useful question is where each face appears and whether that use repeats.

Choose the smallest set of roles that explains the page: display, heading, body, label, caption, and code only when each has visible evidence. For every role, record size, weight, line height, tracking, family, and one usage example. Sort the roles by visual importance and compare the jumps between them.

Test the scale in an opening section, a dense interface area, and a long text block. If one role changes substantially, create a responsive or contextual variant instead of averaging the values. Keep color separate from size so the hierarchy still works in grayscale. Finish by checking wrapping, body readability, label clarity, button emphasis, contrast, and the smallest text size. This creates a practical starting point without claiming the observed values are the site's official rules.

Related questions

• Website Design Analyzer for Border Radii and Shadows
• Inspect a Website's Spacing Scale from Its URL
• Website design analyzer for color roles
• Inspect a Website's Page Layout from Its URL