Website Typography Analyzer With Font Sizes

Contents

• [Start with the typography decisions](#start-with-the-typography-decisions)
• [How to judge font sizes](#how-to-judge-font-sizes)
• [Turn findings into a small system](#turn-findings-into-a-small-system)
• [Typography audit checklist](#typography-audit-checklist)
• [Use this in your AI agent](#use-this-in-your-ai-agent)

A useful website typography analyzer should return more than a font name. It should show each typeface, where it appears, its size, weight, and line height. Use those details to separate the site's core text system from display or supporting fonts, then compare the findings with your own page goals.

Start with the typography decisions

Check these details for the main heading, supporting text, navigation, buttons, and body copy:

1. Font family: Is the page using one family or a combination of sans serif, serif, and monospace faces?
2. Font size: What sizes appear in headings, body copy, labels, and controls?
3. Weight: Which roles use regular, medium, semibold, or bold weights?
4. Line height: Does the page use compact display text and more open paragraphs?
5. Role: Is the font serving interface, editorial, branding, or code-like content?

Record representative elements by role instead of collecting a long list of isolated text nodes.

The captured Linear reference lists Inter Variable, Berkeley Mono, and Tiempos Headline. That combination is useful as an observed example of a primary interface sans serif, a supporting monospace face, and an occasional editorial display face. It is not a recommendation for every site.

How to judge font sizes

Look for relationships between levels rather than chasing isolated numbers. A strong hierarchy makes the largest text unmistakable, separates section headings from body copy, and keeps controls readable without competing with the main message.

Review the first viewport and a content-heavy section separately. A landing page may use a large hero heading while keeping the rest restrained. That works when body size, line length, and spacing make the page easy to scan. It becomes difficult when every heading is oversized or when small supporting text carries important information.

Ask whether visitors can distinguish headings from labels without relying on color, whether body copy remains comfortable at the full content width, whether buttons and navigation are easy to scan, and whether line height changes appropriately between headings and paragraphs. Repeat the check at a narrow width.

Turn findings into a small system

Reduce the inspection to display, heading, body, label, and code roles where those roles exist. Assign each a family, size range, weight, and line-height range. Do not copy every value if several elements serve the same purpose. Consolidation makes the system easier to maintain and shows where the original page deliberately makes an exception.

Separate facts from decisions. The analyzer can report the family, size, weight, and line height used by a captured element. It cannot decide whether that choice fits your brand, content length, or audience. Mark results as observed, candidate, or approved.

When comparing references, use the same sample text and roles. Compare the hero heading, body paragraph, navigation, and one action label. This exposes differences in hierarchy and density without depending only on font names.

Typography audit checklist

• Capture or open the page at desktop and narrow widths.
• Record families and variants by visible role.
• Note size, weight, and line height for representative elements.
• Check whether the same family appears in headings, body copy, and controls.
• Keep special-purpose fonts separate from the primary interface family.
• Review long paragraphs, labels, and buttons, not only the hero.
• Test the proposed scale with your longest heading and body copy.
• Keep a short list of exceptions and explain each one.

The captured Linear example can help when deciding whether a supporting monospace or editorial face has a clear purpose. For your own page, choose the smallest system that gives every important role a visible distinction.

Use this in your AI agent

> Inspect the typography of this website. Return a table grouped by role with font family, font file or variant when available, font size, weight, line height, and the element or section where each value appears. Separate primary interface text from display, editorial, monospace, and one-off styles. Then summarize the smallest practical typography system, list unusual exceptions, and compare the result against this target: [describe my brand, audience, and preferred tone].

Install Fudge for your AI agent to run this typography check from your working references.

Use the same five roles on both pages: hero heading, section heading, body copy, button or label, and supporting text. Record family, size, weight, and line height in one table, then compare relationships rather than only pixel values.

Start with hierarchy. Does the hero heading clearly lead? Is the section heading distinct from body copy? Are labels smaller without becoming hard to scan? Next, compare density. Similar sizes can feel different when one page uses tighter line height, shorter line lengths, or heavier weights.

Compare both pages at a narrow width as well. A desktop hero size may be intentional while the mobile version steps down. Mark responsive changes separately. Finally, label each observation as fact or preference. The table describes how the pages are built; your content, audience, and brand decide which system fits better.

Use a shared sheet with one row per representative element and columns for page and section, role, exact text sample, font family, font file or variant, desktop size, narrow-width size, weight, line height, letter spacing, contrast note, observed or proposed status, decision, and owner.

Review the sheet in three passes. First, confirm observations against the page. Second, group repeated values into display, heading, body, label, and supporting roles. Third, test the proposed roles with your longest heading, a normal paragraph, a navigation label, and an error or helper message.

End with a decision record covering the primary family, supporting families, type scale, weight rules, line-height rules, and approved exceptions. This gives the team a usable system without preserving every one-off value.

Related questions

• Check heading and body fonts from a URL
• Website Font Detector for Claude Code
• Check where each font is used on a webpage
• Website font checker with sizes and weights