# Capture a Website Typography System for Reuse

[Open the live Fudge conversation](https://design.withfudge.com/share/capture-typography-system-from-a-live-website-for-reuse)

Last updated: 2026-08-25

The fastest way to capture a website typography system is to record each font family, its role, the weights in use, and the sizes, line heights, and spacing that create hierarchy. Then separate what you observed from the rules you want to reuse in your own product.

## Start with a role-based inventory

Do not begin by copying every font file or CSS declaration. First identify the roles that matter:

| Role | Record | Why it matters |
|---|---|---|
| Interface sans | Family, weight range, size, line height | Navigation, labels, controls, body copy |
| Display face | Family, weight, casing, tracking | Hero headlines and campaign sections |
| Monospace face | Family, size, tracking | Code, metadata, technical labels |
| Supporting styles | Italic, condensed, variable axes | Emphasis and special states |

For each role, save a real text sample and the component where it appeared. A heading such as "Plan and build products" reveals the relationship between family, weight, size, and spacing more clearly than a font name alone.

The captured Linear reference below lists Inter Variable, Berkeley Mono, and Tiempos Headline. Treat these as observations from that reference, not as a universal recipe or a complete statement of Linear's internal typography system.

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

## Compare visible roles before reusing them

Check the first screen, navigation, buttons, cards, forms, and long-form text separately. A site may use one family across most of the interface while changing weight, tracking, or line height by component.

Use this checklist:

- **Family:** Is the family repeated, or is this an exception?
- **Weight:** Which weights appear in body copy, labels, headings, and buttons?
- **Size:** What are the smallest readable labels, normal body sizes, and largest headings?
- **Line height:** Does the page feel dense, relaxed, or editorial?
- **Tracking:** Are uppercase labels spaced out? Are large headings tightened?
- **Case:** Are buttons and navigation mixed case, uppercase, or sentence case?
- **Fallbacks:** What happens if the primary web font does not load?

Keep uncertain values marked as questions. A practical capture sheet might say: primary interface family, body weight, emphasis weight, technical family, display family, and open questions about exact sizes and fallbacks.

## Turn observations into reusable tokens

Convert the inventory into a small token set rather than a collection of screenshots:

```css
:root {
  --font-interface: "Inter Variable", sans-serif;
  --font-mono: "Berkeley Mono", monospace;
  --font-display: "Tiempos Headline", serif;
  --weight-regular: 400;
  --weight-medium: 500;
  --text-body: 1rem;
  --text-label: 0.75rem;
}
```

These values are a starting structure, not a claim about the exact source implementation. Validate them at narrow and wide widths, and record whether each value was observed, estimated, or selected for your own product. If the source uses a variable font, note the supported axes and use only the values your interface needs.

A useful typography handoff includes the family inventory, role map, type scale, examples, fallback stacks, responsive guidance, and verification notes. It should also identify which files or URLs need separate rights checks. A captured page does not automatically provide source files, permission, or licensing terms.

Test the draft on a settings page, marketing headline, form, and long paragraph. If the hierarchy remains clear across all four, the capture has become a reusable direction rather than a one-screen imitation.

## Use this in your AI agent

> Capture the typography system from this website for reuse. List every observed font family, likely role, weight, size, line height, tracking, casing, and representative text sample. Separate confirmed observations from estimates, compare interface, display, and monospace usage across the page, and return a compact CSS token draft with open questions and checks I should perform before using it in production. Do not claim access to the site's internal design system or licensing terms.
>
> [Install Fudge for your AI agent](/mcp)

---

Treat each font as a role candidate, then verify where it appears before assigning it to your own system. Start with interface text, display headings, technical content, and special emphasis.

For each candidate, record the text sample, component, and reason it may be separate. A monospace face in a code block is a clear technical role. A serif used only in large headlines is probably a display role. A second sans serif in a footer may be a local exception rather than a global family.

Compare repeated components instead of isolated screenshots. Check two headings, two buttons, body copy, navigation, and a form label. Repeated patterns are stronger evidence for a token. The captured Linear example is useful because its observed choices can be grouped into interface, supporting monospace, and occasional editorial roles.

---

Give your team five parts: a font inventory, role map, type scale, usage examples, and verification notes.

The inventory should include family names, available weights or axes, file sources, and fallback stacks. The role map should identify body text, navigation, buttons, headings, code, and editorial callouts. The type scale should list practical tokens for labels, body, supporting text, headings, and display text with size, weight, line height, and tracking.

Add examples for every important role and include responsive guidance where values change between narrow and wide screens. Mark each value as observed, estimated, or chosen for your project. Have someone test the handoff on a real screen before treating it as final.

## Related questions

- [Extract a Website's Border Radius Scale](/share/extract-a-website-s-border-radius-scale)
- [Capture a spacing scale from a live website for reuse](/share/capture-spacing-scale-from-a-live-website-for-reuse)
- [Extract a Website's Color System](/share/extract-a-website-s-color-system)
- [Extract a Website's Component Styles](/share/extract-a-website-s-component-styles)