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

Pattern	Why it's wrong
Auditing from CSS only	Misses rendered defects; invents non-defects
Testing only the happy path	Defects live in longest strings, empty states, other locales
Testing only breakpoint endpoints	Fluid typography breaks mid-band
Reporting "passes accessibility" after a contrast check	Three other criteria unchecked
Findings without locations	Unactionable
No stated criteria	Critique wearing an audit's clothes
Omitting what wasn't checked	Manufactures false confidence
Grading against standards set after seeing the work	Guarantees a pass

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.