Typography Audit

Typography audit

A repeatable, evidence-producing pass. An audit finds defects against criteria. It does not express preferences — that's typography-critique.

1. When to invoke

• "Audit our typography" / "check this page."
• Pre-launch or pre-handoff review.
• Design-system compliance checking.
• Inherited code or design of unknown quality.
• Verifying a fix actually landed.

2. Required context

• Scope — which pages, components, breakpoints, locales, themes.
• Criteria — the design system, brand guidelines, and conformance target. Without stated criteria you're doing critique, not audit.
• Access to the rendered artifact. An audit from source alone is not an audit.
• Which findings are blocking vs. advisory.

3. Invariant principles

• Audit the rendered result. CSS review finds a subset of defects and invents others.
• Every finding needs evidence — the location, the observed value, the expected value, the criterion. "Line-height feels tight" is critique; "body line-height is 1.2, system token is 1.5, at /pricing" is a finding.
• Criteria before findings. Define what pass means before looking, or you'll grade against a standard set after seeing the output.
• Report what you did not check. An audit that hides its coverage gaps is worse than no audit, because it licenses false confidence.
• Accessibility findings are blocking by default. They sit at the top of the source hierarchy.
• Passing one criterion establishes nothing about another. Contrast, resize, and spacing-override fail independently.

4. The audit checklist

Work through in order. Record pass/fail/not-checked for each.

A. Accessibility (blocking)

• 1.4.3 Contrast — every text/background pair, every state, incl. over imagery
• 1.4.4 Resize to 200% — no loss of content or function
• 1.4.12 Text spacing override — no loss of content or function
• 1.4.5 Images of text — inventoried and justified
• Zoom not suppressed (user-scalable, maximum-scale)
• Heading levels sequential and semantic
• Text sizes in relative units

B. Reading

• Measure within a defensible range at every breakpoint
• Line-height appropriate to measure and size
• Body size appropriate to face, device, and distance
• Paragraph separation single and unambiguous

C. System compliance

• All font sizes on-scale / on-token
• All line-heights unitless and on-token
• Weights limited to the shipped set
• No unauthorised typefaces
• Component tokens route through semantics

D. Micro

• Correct quotes, dashes, ellipses
• No rivers; word spacing even
• Justified text only where measure supports it
• All-caps runs tracked
• No orphans/widows in prominent text
• No faux bold/italic synthesis

E. Data and UI

• Tabular figures wherever numbers align vertically
• 1 l I and 0 O distinguishable
• Longest realistic string tested per label, per locale
• Truncation recoverable

F. Performance

• Only rendered weights/styles shipped
• font-display set explicitly
• Font-attributed CLS measured
• Preloads have crossorigin and are limited to critical files

G. Internationalisation (if in scope)

• Every script covered by a real font
• Logical properties used; RTL verified
• lang and dir set correctly
• Per-script line-height verified with real text

5. Failure patterns in auditing itself

6. Evaluation procedure

1. Write the criteria down first. System tokens, conformance target, scope.
2. Enumerate surfaces: pages × breakpoints × locales × themes. State the sample.
3. Render each. Screenshot for evidence.
4. Work §4 A→G. Record pass / fail / not-checked — never leave a row blank.
5. For each fail: location, observed, expected, criterion, severity.
6. Re-run any automated checks (contrast tooling, token lint) and reconcile with what you observed.
7. Rank by severity: accessibility → reading → compliance → micro.
8. Explicitly list coverage gaps.

7. Output format

AUDIT — <scope>
Criteria: <system version> · conformance <AA|AAA> · locales <list>
Surfaces sampled: <n> of <n> (<list>)

FINDINGS (ranked)
[BLOCKING] <criterion> — <location>
    observed: <value>   expected: <value>
    evidence: <screenshot/measurement>
[MAJOR] …
[MINOR] …

PASSED: <list of checks that passed>
NOT CHECKED: <list, with reason>

8. Examples

Pre-launch audit of a marketing site, AA target.

Criteria fixed first: the v2 token set, WCAG AA, EN + DE, light and dark. Sampled 6 pages × 3 breakpoints × 2 locales × 2 themes = 72 surfaces; rendered all, screenshotted each.

Three blocking findings. Captions are #8A8A8A on white = 3.1:1 across all pages — fails 1.4.3 (needs 4.5:1 at that size). The pricing table clips its footnote row at 200% zoom — fails 1.4.4, caused by fixed height. And under the 1.4.12 spacing override the nav overlaps the logo — fails, caused by a fixed-width header.

Two major: the German hero heading overflows at 375px, and font-display is unset on two of five faces so they default to block-like behaviour.

Not checked: dark-mode contrast over hero imagery (the images are CMS-driven and I only had two samples), and no screen-reader pass was run. Both should be closed before launch — I'm not claiming they pass.

9. Counterexamples

• ❌ "Typography audit: looks good, maybe increase line-height a bit." — No criteria, no evidence, no locations. That's an opinion.
• ❌ "Accessibility: pass (contrast checked)." — Three other criteria unexamined.
• ❌ "Audited the CSS, found no issues." — Not an audit.
• ❌ Findings with no severity ranking. — Everything reads as equally urgent.
• ❌ Omitting the "not checked" section. — The most dishonest part of a bad audit.
• ❌ "Tested at 375 and 1440." — For fluid type, the middle is where it breaks.
• ❌ Auditing with lorem ipsum. — Real content is where labels overflow.

10. Source citations

• WCAG 2.2 §1.4.3, §1.4.4, §1.4.5, §1.4.12 — the blocking criteria.
• Hochuli, Detail in Typography — the micro checklist: rivers, word spacing, justification limits, paragraph indication.
• Lupton, Thinking with Type 3e — hierarchy, paragraph composition, typographic conventions; when breaking a rule is appropriate (an audit must distinguish a deliberate break from a defect).
• Rutter, Web Typography — measure, font loading, figure styles, OpenType.
• Brown, Flexible Typesetting — responsive behaviour across the whole band.
• Stocks, Universal Principles of Typography — a retrieval-friendly index of principles to audit against.
• This pack's ../type/references/source-hierarchy.md for resolving conflicts between findings.