# Typography Audit > Use when systematically reviewing existing typography against criteria — "check this page", "audit our type", pre-launch review, design-system compliance, or inherited work of unknown quality. Produces a pass/fail finding list with evidence. Use typography-critique instead when the question is about taste rather than compliance. - Skill: `jpoindexter/typography-audit` (Agent Skill) - Install (CLI): `npx skillmds@latest add jpoindexter/typography-audit` - Raw SKILL.md: https://api.skillmd.com/api/skills/jpoindexter/typography-audit/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Design & Media - Author: jpoindexter (https://skillmd.com/u/jpoindexter) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/jpoindexter/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 — Criteria: · conformance · locales Surfaces sampled: of () FINDINGS (ranked) [BLOCKING] — observed: expected: evidence: [MAJOR] … [MINOR] … PASSED: NOT CHECKED: ``` ## 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.