danium/practicaltypography

practicaltypography

Your agent already knows typography rules. It doesn't know which ones matter, in what order, or when you're allowed to break them.

One skill that audits and produces publication-grade typography for blogs, websites, docs, slides, résumés, data tables, and PDFs — grounded in Matthew Butterick's Practical Typography and separated from project-authored heuristics and current accessibility, internationalization, font, and delivery requirements. Its gated audit classifies context, protects literal content, inspects the strongest available evidence, applies higher-priority constraints, then reports the most consequential corrections.

The demo

Same agent. Same prompt. One of them read the skill first. Prompt: "My blog looks unprofessional and I can't figure out why. Can you audit the typography?" — with CSS: 14px Open Sans/Arial, line-height: 1.8, full-width column, indent + margin on paragraphs, justified, uppercase underlined headings, bold-italic blockquotes.

<table> <tr> <th width="50%">Any agent, vanilla</th> <th width="50%">Same agent, <code>typography</code></th> </tr> <tr valign="top"> <td>

A solid 8-point list: 14px too small ("use 16–18px"), unconstrained line length ("readable 45–75 characters"), uppercase + underlined headings, justify rivers, redundant paragraph separation, bold+italic blockquotes, "line-height 1.5–1.65 at 16px+ reads better", straight quotes.

(All real issues. No order, no severity, no verdict on the fonts — Arial sat in that stack unremarked. The numbers are vibes: 45–75, 1.5–1.65, "ideally 1.125rem+".)

</td> <td>

[MAJOR] body font-size: 14px below range → 18px (15–25px) [MAJOR] line-height: 1.8 far above 1.2–1.45 → 1.4 — "if you deliberately want an airy Medium-style feel, the pairing is 19–21px with 1.5–1.6, never 14px with 1.8" [MAJOR] measure: uncapped, 150+ chars on desktop → max-width: 65ch — "the single most common web typography failure" [MAJOR] font stack: Arial is an avoid-list font; Open Sans judged overexposed by the unlisted-font criteria → Source Serif / Charter / IBM Plex

…then paragraphs, headings, emphasis, characters — each [MAJOR|MINOR], closing with a corrected CSS block and "the three fixes doing the most damage."

</td> </tr> </table>

The vanilla answer isn't bad. It's good — and it missed the font entirely, ranked nothing, and its numbers drift with whatever the model last read. The skill's answer is a procedure: six checks in impact order, severity by definition rather than vibes, sourced ranges, and a required closing the user can act on.

Before / after

The committed input demo/before.html is audited in demo/AUDIT.md, and demo/after.html applies the changes with the wording preserved. Character-composition edits are reported explicitly. demo/RUN.md records the visual inspection context and artifact hashes; the broader behavior contract is scenario EVAL-DEMO in evals/scenarios.json.

<table> <tr> <th width="50%">Before — vanilla agent</th> <th width="50%">After — typography skill</th> </tr> <tr valign="top"> <td></td> <td></td> </tr> </table>

The headline changes: 16px/1.7 Georgia became 18px/1.4 Charter, the dark striped table header became thin rules with tabular figures, the italic intro and tinted blockquote calmed down to structural distinction, and the centered inverse closing box became left-aligned text. Same content — and the page got shorter (1584px vs 1804px of scroll), because tighter leading recovers what the web-default 1.7 wastes. Good typography costs nothing in word count.

Install

Any agent (recommended):

Claude Code (plugin):

Codex: ask $skill-installer to install from https://github.com/danium/practicaltypography

Manual: clone and copy skills/typography into your agent's skills directory.

What's inside

How it was built

The repository now carries a vendor-neutral regression suite. Fourteen scenarios cover web prose, responsive measure, code, email, print, slides, tables, PDF delivery, font fallback, WCAG text spacing, non-Latin and mixed-script text, font licensing and glyph coverage, and public evidence. The baseline result records what revision 41559fe7ee3c27c4fc46a6feda29ad7898c7b4c6 got wrong by static instruction inspection; candidate results and deterministic checks are documented in evals/. The records do not pretend to be model transcripts. What this is (and isn't)

Provenance: Matthew Butterick, Practical Typography (2010–present), supplies the source-backed typography benchmark. Accessibility, internationalization, platform behavior, semantic safety, and licensing requirements come from current external authorities or project safety decisions. provenance.md classifies every rule cluster and records its scope, source or rationale, verification date, and evaluation coverage. This repo is an independent paraphrased distillation, not the book, and is not affiliated with or endorsed by Butterick.

Practical Typography is reader-supported. If this skill earns its keep, pay for the book or buy his fonts — they're the professional upgrade the skill keeps recommending.

Where the skill knowingly deviates, it says so. The optional presets are labeled project-authored starting points. Current requirements are not misattributed to Butterick, and source-derived lists are described as dated shortlists rather than complete reproductions. Contributing

Every rule must be classified as PT, DEVIATION, or CURRENT, with provenance and regression coverage before it ships. See CONTRIBUTING.md. License

MIT — covers this distillation and its structure. The underlying book and its content remain © Matthew Butterick.