Find a Website's Font Family and Line Height

Contents

• [Start with representative text](#start-with-representative-text)
• [Check whether line height is intentional](#check-whether-line-height-is-intentional)
• [Verify the font and variant](#verify-the-font-and-variant)
• [Turn observations into a type scale](#turn-observations-into-a-type-scale)
• [Use this in your AI agent](#use-this-in-your-ai-agent)

The fastest way to find a website's font family and line height is to inspect its actual text styles, then verify the result across headings, body copy, buttons, and small labels. Record the family, variant, weight, size, line height, and location for each style before copying anything into your own site.

Start with representative text

Begin with four samples: the main heading, a paragraph, a navigation label or button, and a small supporting label. For each one, capture:

• Font family, including any variable or display face
• Font size
• Font weight
• Line height
• Letter spacing, when it changes the texture
• Text case and italic styling
• The page or component where the sample appears

Do not rely on one heading. A website may use one family for its interface, another for editorial headings, and a monospace face for code or metadata. Use a role table such as this:

The table is a template, not an assumption about the site.

The captured Linear reference shows Inter Variable as the primary sans serif, with Berkeley Mono and Tiempos Headline as supporting choices. That is a useful reminder to check secondary roles rather than treating every visible word as one font system.

Check whether line height is intentional

Line height is easiest to judge on repeated text blocks. Compare a paragraph with two or three lines, a card title that wraps, and a large heading with a forced line break. Tight display line height keeps a headline compact, while body copy needs more vertical space for comfortable reading.

When the value is listed as normal, record the rendered result and the browser or design-tool value separately. If you are rebuilding the style in CSS, start with a unitless value such as 1.5 for body copy, then adjust against the actual block height. Unitless values scale more predictably when the font size changes.

Check whether the page uses a different line height at smaller widths. Responsive type may change size, width, wrapping, or alignment without changing the family. Compare desktop and narrow layouts whenever both are available.

Verify the font and variant

Use this checklist before copying the result:

1. Does the same family appear in several interface elements?
2. Is the heading face a separate family or a heavier variant?
3. Are the font files loaded locally, from a hosted service, or through a variable file?
4. Does the weight exist as a real variant, or is it simulated by the browser?
5. Does the line height remain readable when text wraps?
6. Are navigation, buttons, captions, and long-form copy styled differently?

The captured Linear example includes a named primary family and two supporting families, but it does not establish a complete line-height table for every component. Treat it as an observed reference, not a universal recipe. Do not fill missing measurements with guesses.

Turn observations into a type scale

Once the measurements are complete, convert them into named roles rather than scattering values through a stylesheet. Define roles such as --type-display, --type-body, --type-label, and --type-mono, then attach size, weight, line height, and tracking to each role. Test those roles on real paragraphs and wrapped headings before finalizing them.

For a handoff, include the source page, text sample, observed family and variant, responsive state, and capture context. Keep observed facts separate from implementation recommendations. If a value was estimated from the rendered page rather than directly confirmed, label it as an estimate. This distinction makes the handoff useful without overstating certainty.

Use this in your AI agent

> Inspect the captured website typography. Identify the font family or families, font files and variants, sizes, weights, line heights, and letter spacing for the main heading, body text, navigation or buttons, and small labels. Return a compact table, note responsive differences, separate observed values from recommendations, and suggest a CSS type scale without inventing values that were not observed.

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

Compare the main heading, paragraph copy, navigation, buttons, cards, and any code or metadata. If the letter shapes, spacing, or proportions change clearly between roles, record separate candidates and verify the family and variant for each.

A useful test is to compare the same short phrase in each observed font at the same size and weight. Look at lowercase shapes, punctuation, numerals, x-height, and overall width. A display serif may appear only in editorial moments, while a sans serif handles the interface. A monospace face belongs to a different role and should be checked around code, shortcuts, or technical labels.

Keep the result role-based: display, interface, body, and mono are more useful than one site-wide label. If two roles use the same family with different weights or tracking, keep them as separate styles.

Include a short source note, a role table, representative text samples, and implementation cautions. The table should list family, file or variant, weight, size, line height, tracking, casing, and the screen or component where each style appeared.

Add a responsive section that records changes on narrower screens, such as size, line height, wrapping, or alignment. Label estimates clearly and keep observed facts separate from proposed CSS tokens.

A useful structure is source and capture context, display and body roles, interface and label roles, monospace roles, family and variant details, desktop and narrow-screen values, recommended CSS properties, and open questions such as whether a weight is variable or simulated. Finish with a wrapped heading and a few test paragraphs so the next person can confirm the line heights outside the original screenshot.

Related questions

• Find Fonts Similar to a Brand Typeface
• Find Every Font Weight Used on a Website
• Find Free Alternatives to a Commercial Display Font
• Find Custom Font Files Used by a Website