Audits font loading, type scales, measure, spacing, OpenType, and rendered punctuation with 78 scoped rules. Use when asked to "audit typography", "fix the fonts", or "review my type system". For a new visual direction use ui-design Direction; for general UI defects use ui-design Audit.

Typography Audit 78 rules in 10 categories for web typography. Every finding names file, rule, and fix. IS: typography only: font loading, sizing, punctuation, spacing, hierarchy, text layout, OpenType features, typeface pairing, brand type, display type. IS NOT: broad UI review (accessibility, forms, navigation: use ui design Audit mode), or a redesign (new typefaces, scales: use ui design Direction mode). Audit Workflow Track this checklist: 1. Scope to changed files unless a full sweep is requested. For a PR, use the diff against its actual base merge base, including committed changes, filtered to .css , .scss , .html , .tsx / .jsx , and template files. 2. Map code to categories via the signal table; skip categories with no signal. 3. Load rule files by prefix ( rules/font .md , etc.), only for the categories the signals selected. 4. Run categories in priority order so CRITICAL findings surface even if the audit is cut short. 5. After fixes, re run only the rules that produced findings, then finalize the report. Scoping Signals → Categories Signal in code Categories to load @font face , font family , font files, variable fonts, font stretch , transform: scaleX on text font font size , clamp() , media query type changes, max width on text, <em / <strong , text decoration size Copy in HTML/JSX (headings, paragraphs, labels) punct line height , letter spacing , word spacing , margin on text, text transform: uppercase spacing Heading elements, type scale tokens, text properties hierarchy text align , lists, blockquotes, multi column text layout font feature settings , font variant , figures/fractions in copy opentype Logo/wordmark styles, brand tokens, text color tokens, license comments brand Two or more distinct font family values pairing Hero/display sizes, drop caps, initial letter display Rule Categories by Priority Priority Category Impact Prefix Rules 1 Font Selection & Weights CRITICAL font 11 2 Sizing & Measure CRITICAL size 6 3 Punctuation & Special Characters CRITICAL punct 12 4 Spacing & Rhythm HIGH spacing 8 5 Hierarchy & Scale MEDIUM HIGH hierarchy 8 6 Alignment & Layout MEDIUM layout 6 7 OpenType Features MEDIUM opentype 7 8 Brand & Identity MEDIUM brand 8 9 Typeface Pairing MEDIUM pairing 5 10 Display & Headlines LOW MEDIUM display 7 Category map and impact rationale: rules/ sections.md . Each rule file gives why it matters plus an incorrect and a correct example. Category impact reflects the category's worst case rules; report findings with the rule's own frontmatter impact , which frequently differs (e.g. brand color is HIGH inside the MEDIUM brand category because it holds the WCAG contrast floor). Review Output Contract Report findings as: Group by file; order by impact within file. Every finding: impact tag, rule ID, file:line , one line issue, fix. Include clean files as ✓ pass so coverage is visible. End with a summary: counts per impact level. Gotchas Don't preload every rule file. Load only the prefixes the signal table selects; a full load spends the budget on categories with no signal in scope. Report the rule's frontmatter impact , never the category's. Two rules get misreported most: brand color is HIGH (an accessibility floor, not a brand nicety) and punct daggers is LOW MEDIUM (decoration, despite sitting in a CRITICAL category). Punctuation rules apply to rendered copy only. Flagging straight quotes or inside <code , <pre , or JS/TS string literals is a false positive; "fixing" them breaks the code. Confirm the rendered font and computed styles through ui verification when a finding depends on them. A CSS declaration alone does not prove which face loaded. Don't flag missing OpenType features without confirming the loaded font ships them. Browsers silently ignore unsupported font feature settings tags, so the fix does nothing. Every finding needs file:line and a concrete fix; an unactionable finding forces a redo. An audit is not a redesign. Proposing new pairings or scales turns a 10 minute review into a design project; flag the issue and route redesign asks to ui design . Don't equalize priorities. A LOW MEDIUM display nit above a CRITICAL faux bold finding buries what actually looks broken. Related Skills ui design Audit mode: broad frontend quality (accessibility, forms, navigation, motion); its typography coverage is shallower. ui design Direction mode: choosing typefaces, scales, and visual direction from scratch; run when a finding becomes a redesign request. copywriting : heading and label wording. This skill governs only the casing of that copy ( punct case rules ). Maintenance only: evals/evals.json contains regression scenarios for changes to this skill; it does not load during a user task.

typography-audit