Extract a Typography System for an AI Coding Agent

Contents

• [Start with a typography inventory](#start-with-a-typography-inventory)
• [Turn observations into agent-ready rules](#turn-observations-into-agent-ready-rules)
• [Build a compact implementation brief](#build-a-compact-implementation-brief)
• [Check the result before shipping](#check-the-result-before-shipping)
• [Use this in your AI agent](#use-this-in-your-ai-agent)

The fastest way to extract a typography system for an AI coding agent is to capture the target website, list every font role, then turn the observed values into implementation rules. Give the agent families, fallbacks, weights, sizes, line heights, letter spacing, and usage examples instead of only naming a font.

Start with a typography inventory

Create one row for each visible role:

The important detail is the role, not just the file name. A page may use one family for most interface text, a monospace family for technical elements, and an occasional display face for editorial emphasis. Record where each choice appears so an AI agent does not apply a decorative font to every heading.

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. Its notes identify Inter Variable as the primary sans serif, Berkeley Mono as supporting monospace, and Tiempos Headline as an occasional editorial display face. Treat those as observed roles in that reference, not as a universal recipe.

Turn observations into agent-ready rules

A useful handoff should answer five questions:

1. Which family is the default for interface and body copy?
2. Which weights are actually needed?
3. Which roles use a different family?
4. What size and line-height scale should the agent follow?
5. What should happen when a font cannot load?

Write rules in plain language. For example: use the primary sans serif for navigation, buttons, labels, and body copy; reserve the monospace family for code, keyboard shortcuts, and compact technical metadata; use the display family only for selected editorial headings. Then add a fallback stack for each family and tell the agent not to substitute a serif or monospace face without a clear role.

If the exact measurements are not available, label them as estimates and ask the agent to verify them against the captured page. Do not turn an inferred size into a claimed fact. A practical system can start with a small scale such as 12, 14, 16, 20, 28, 40, and 56 pixels, but the agent should adjust those values after comparing the target page's proportions.

Build a compact implementation brief

Use a structure like this:

This format is short enough for an AI coding agent to follow and specific enough to prevent random font choices. Include a few sample strings, because a font can look right in a heading and wrong in a dense label. Check numerals, punctuation, uppercase text, long paragraphs, and mixed-case navigation.

Check the result before shipping

Ask the agent to render a small specimen page with the real content types: a hero heading, paragraph, button, navigation row, code sample, and quote. Compare the specimen with the reference at the same viewport width. Look for changes in line breaks, heading height, button width, text density, and the visual weight of labels.

If the page feels wrong, change one variable at a time. First confirm the family, then weight, then size, then line height and tracking. A close family with the wrong weight can feel less accurate than a slightly different family with the correct spacing. Keep the final brief beside the code so later components use the same decisions instead of recreating typography from memory.

Use this in your AI agent

> Capture and extract the typography system from the target website. Return observed font families, available variants, weights, sizes, line heights, letter spacing, and the page roles where each choice appears. Separate confirmed observations from estimates. Then write an implementation brief with CSS variables, fallback stacks, a responsive type scale, and rules for headings, body copy, UI labels, code, and editorial accents. Include a specimen checklist using a hero heading, paragraph, button, navigation row, code sample, and quote. Do not apply a decorative or monospace font outside its observed role. Compare the rendered specimen with the captured page and call out any uncertain values.

Install Fudge for your AI agent

Give it the role, variant, weight, size, line height, tracking, fallback stack, and a short example of where the style appears. Font names alone do not tell an agent whether a family belongs on body copy, navigation, code, or a display heading.

Also include constraints. Say which families are allowed for general text, which are reserved for technical labels, and which should be used sparingly. Add a small specimen checklist with the exact content types you care about. The agent can then compare line breaks, button widths, heading height, and text density instead of matching a name without matching the visual result.

When a value is uncertain, mark it as an estimate. Ask the agent to verify the value against the captured page before placing it in shared variables. That keeps the brief useful without turning a visual guess into a false design rule.

Use this sequence:

1. Capture the target page at a representative desktop and mobile width.
2. List every visible family and record the role attached to it.
3. Check regular, medium, semibold, bold, italic, and variable variants where they appear.
4. Measure or estimate body size, heading sizes, line heights, and tracking.
5. Test numerals, punctuation, uppercase labels, long paragraphs, and code-like text.
6. Note fallback behavior and whether a role disappears or changes on smaller screens.
7. Write CSS variables and role rules, not isolated declarations.
8. Ask the agent to render a specimen page and compare line breaks and density.
9. Correct family first, then weight, size, line height, and tracking.
10. Keep confirmed observations separate from values that still need checking.

This produces a reusable system rather than a list of fonts copied from one screen.

Related questions

• Get the Border Radius Scale from a Live Website
• Extract a spacing scale for an AI coding agent
• Get the Color System from a Live Website
• Extract Shadow Styles for an AI Coding Agent