Website font checker with sizes and weights

Contents

• [Start with a typography inventory](#start-with-a-typography-inventory)
• [How to compare sizes and weights](#how-to-compare-sizes-and-weights)
• [Decide what to copy](#decide-what-to-copy)
• [A quick checking workflow](#a-quick-checking-workflow)
• [Use this in your AI agent](#use-this-in-your-ai-agent)

Start with a typography inventory

A useful website font check should return more than a font family name. Capture each visible text role with its family, size, weight, line height, and likely purpose, then group repeated values into a small type scale.

Use this order:

1. Display text: hero headings, page titles, and large promotional statements.
2. Body text: paragraphs, descriptions, documentation, and longer reading sections.
3. Interface text: buttons, navigation, tabs, labels, inputs, and metadata.
4. Supporting styles: monospace text, captions, badges, code, and editorial accents.

For every role, record the actual family and variant, the approximate size, the weight, line height, letter spacing, and casing. Then note where it appears. A heading at 64px and a heading at 32px may use the same family and weight but serve different jobs, so the location matters as much as the number.

Open the examples below and compare the first screen before borrowing a pattern. The captured Linear reference lists Inter Variable, Berkeley Mono, and Tiempos Headline, which is a useful reminder that one page can combine a primary sans serif with a supporting monospace and a display face. Treat those names as observed examples, not as a universal recommendation.

How to compare sizes and weights

Build a simple table with one row per text role:

Do not treat weight numbers as interchangeable across families. A 500 in one family can look closer to 600 in another. Compare the visual density of the letters, especially in buttons and navigation, and check whether the font is variable. A variable family may support a continuous weight range even when the page uses only a few values.

Line height deserves its own check. Large headings often use tighter leading, while body text needs enough vertical space for comfortable reading. A size and weight match can still feel wrong if the line height or letter spacing differs.

Decide what to copy

Use the inventory to separate reusable rules from page-specific decoration. A dependable starting point is one primary family for most interface and body text, one optional monospace family for technical content, and one optional display family for a clearly different editorial role.

Choose a font system by asking:

• Does the family stay legible at the smallest interface size?
• Does it have the weights needed for headings, body copy, and controls?
• Does the line height keep dense sections readable?
• Does the type scale create a clear difference between title, section heading, body, and label?
• Are special faces limited to places where the contrast adds meaning?

If the answer is no, copy the structure rather than the exact values. For example, preserve the relationship between title, body, and label sizes while testing a different family with similar width and weight. This gives you a consistent system without pretending that every font renders the same way.

A quick checking workflow

First inspect the page at its normal desktop width. Then check a narrow viewport, because responsive rules often change heading size, line height, wrapping, or navigation labels. Sample repeated components rather than only the hero. Buttons, cards, forms, and footer links reveal whether the typography system is applied consistently.

Before finalizing your notes, check four things:

• Family consistency: repeated roles should not unexpectedly switch families.
• Weight clarity: headings and actions should have a visible hierarchy.
• Size rhythm: levels should feel intentional rather than randomly chosen.
• Wrapping: a heading that looks good on desktop may become too tall or awkward on mobile.

The captured Linear example is especially useful for comparing a primary sans serif with supporting type choices. Use it as a visual reference for how roles can coexist, then verify every size and weight on the page you are studying.

Use this in your AI agent

> Check the typography on this website. Return a table of every distinct font family, font file or variant, size, weight, line height, letter spacing, casing, and visible usage. Group repeated values into a practical type scale, separate primary, interface, monospace, and display roles, and flag responsive changes or inconsistent text styles. End with CSS variables I can adapt, but label all observations as page-specific rather than an official design system.

Install Fudge for your AI agent to run this kind of typography check from your agent.

Start by grouping measurements by job rather than by selector. Put hero and page titles in one group, section headings in another, then body, labels, buttons, metadata, and code. Within each group, sort by size and remove duplicates that differ only because of rounding or a small responsive adjustment.

Next, choose a small set of named levels such as display, heading, subheading, body, small, and label. Keep the observed size, weight, and line height beside each name so you can see what changed. If a page uses many nearly identical values, do not copy all of them automatically. Test whether they represent meaningful roles or accumulated one-off overrides.

For each level, write a short usage rule: where it appears, what it communicates, and whether it changes on narrow screens. Keep monospace and display faces separate from the main scale unless they genuinely share the same rhythm. This turns a list of measurements into a system another designer or developer can apply consistently.

Separate visual observation from permission and ownership. A font name, size, weight, or spacing value can describe what you saw, but it does not by itself prove that you own an internal design system or have permission to reproduce every asset and font file. Record the page URL and date of your check, then verify the font's own licensing terms before shipping it.

Also test the family with your real content. Compare numerals, punctuation, long headings, mixed-case labels, and the languages your product supports. Check the smallest text at normal viewing size, not only a large screenshot. A family that resembles the reference may wrap differently or require different leading.

Finally, preserve the relationship between roles instead of copying blindly. You can use the observed hierarchy as a starting point while selecting a licensed alternative with similar width, contrast, and available weights. Recheck the result on desktop and mobile, including buttons, forms, navigation, and dense data views.

Related questions

• Website Font Detector for Claude Code
• Website Font Checker for AI Coding Agents
• Website Typography Analyzer With Font Sizes
• Find Similar Fonts for Web Design