How to Audit a Website's Typography

A typography audit is the process of cataloging every font, size, weight, and spacing value a website actually uses in practice — which is often more inconsistent than a style guide would suggest, since font choices tend to drift as a site grows.

What to check in a typography audit

• Font families — how many different typefaces are actually rendered, and whether they match the intended brand fonts
• Font sizes — the full range in use, and whether headings and body text follow a consistent scale
• Font weights — which weights (regular, medium, bold, etc.) appear, and whether any are used inconsistently for the same purpose
• Line height and letter spacing — whether these vary in ways that hurt readability or visual consistency

Doing it manually

Using your browser's DevTools, you can inspect an element, open the Computed or Styles panel, and read its font-family, font-size, font-weight, line-height, and letter-spacing values one element at a time. This works everywhere but is slow across a full page or site.

A faster approach: Font X-Ray

Font X-Ray speeds this up: select text on a page and see its full typographic detail — family, size, weight, color, line height, letter spacing — in a visual side panel, without switching to DevTools for every element. It saves recent scan history so you can revisit earlier findings, and the Pro tier adds CSS export and JSON export for documenting the audit results directly.

Why it's worth doing

An inconsistent typography system usually isn't intentional — it accumulates as different people touch a codebase over time. A short audit before a redesign, rebrand, or design system documentation effort often surfaces more variation than expected, and fixing it is one of the highest-leverage, lowest-risk visual improvements available.