Web Typography
Web typography principles and implementation
Master web typography from typeface selection to responsive implementation. Based on Jason Santa Maria's "On Web Typography," this skill helps your AI agent make informed typographic decisions that improve readability and brand expression.
npx skills add wondelai/skills/web-typography --global 
On Web Typography Jason Santa Maria View on Amazon
02 What it is
What is the Web Typography skill?
Typography gets decided once and then shapes every page forever, which is why Web Typography turns Jason Santa Maria’s On Web Typography into an agent skill. It sets measure, line height, and a fluid modular scale before it argues about typefaces, pairs faces with real structural contrast, and loads fonts under a budget so nothing reflows on arrival.
03 Key concepts
Five principles your agent applies.
Drawn from On Web Typography — not advice it repeats back to you, but decisions it makes while it works.
04 Fit
When to use it, and
when not to.
four symptoms it fixes, and four it doesn't.
Reach for it when
Your headlines look sharp and readers bail two paragraphs into the body copy.
You picked two fonts because they looked nice together and the pairing now feels muddy.
Text jumps as webfonts arrive and your layout-shift score is taking the hit.
Type sizes were set per breakpoint and there are now eleven of them with no relationship.
Reach for something else when
You want type as spectacle. viewport-filling display settings and kinetic text belong to Top Design.
The whole visual system needs work, not only the type. Refactoring UI covers spacing, color, and depth.
Font weight is one symptom of a slow page. High Perf Browser covers caching and the critical path.
You are setting type in an iOS app, where Dynamic Type and the system faces rule. see iOS HIG Design.
05 Prompts
Say it like this.
Name the skill at the end of a prompt and the agent applies the framework rather than a vibe. Or say nothing — it loads on its own when a task matches.
Select a font pairing for my SaaS marketing site using web-typography skill
Set up a responsive typographic scale using CSS clamp() using web-typography skill
Improve the readability of my blog post template using web-typography skill
Audit my site's typography for consistency and hierarchy using web-typography skill
06 About the author
07 Same stack
The stack it sits in.
Nine Design & UX skills. Most people run two: this one, and whichever fits the next problem.
All Design & UX skills08 Questions
Before you install.
How do I install the Web Typography skill?
Run npx skills add wondelai/skills/web-typography --global. It takes about 30 seconds and needs no account. The Web Typography skill then works in Claude, Claude Code, Claude Cowork, Codex, Cursor, OpenClaw and Hermes Agent — anything that reads the open agentskills.io format — and your agent loads it on its own when a task calls for it. It is free and MIT-licensed, and the source is at https://github.com/wondelai/skills.
Which book is the Web Typography skill based on?
It packages On Web Typography by Jason Santa Maria — award-winning designer, former creative director of A List Apart. The skill distils the book's method into instructions your agent follows while it works, covering typeface selection, typographic scale and measure & line height. It sits in the Design & UX part of the library.
The book predates variable fonts. Is the advice still current?
The perceptual half does not age: measure, line height, the difference between type for a moment and type to live with, and how a face behaves at the size you actually ship it. The delivery half has moved on, and the skill carries the modern version — WOFF2, variable fonts replacing four static weights, clamp() for fluid scales, font-display and preload for loading behaviour. You get the reasoning from the book and the implementation from today.
Will it pick the right typeface for my brand?
It will shortlist candidates and explain the fit — what a face signals, whether it holds up at body size, whether its glyph coverage and weights match what you need, what it pairs with. What it cannot do is see your brand, your competitors, or the licence you can afford. Expect a well-argued shortlist and a reason for each entry; the final call is a judgement you keep.
How is this different from the typography advice in Refactoring UI?
Refactoring UI treats type as one lever among spacing, color, and depth — enough to make an interface look right. This skill treats it as the subject: modular scales derived rather than guessed, measure enforced in characters, line height set per context, pairings chosen for structural contrast rather than vibe, and a font-loading strategy with a payload budget. Reach for it when the reading experience itself is the deliverable.
Does the guidance work for non-Latin scripts?
The measurements come from Latin typesetting, so take the numbers as Latin-specific. Optimal measure in characters, the 1.5–1.7 body line height, and much of the pairing logic assume Latin letterforms and spacing. The skill will check that a face has the glyph coverage you need, but it will not give you reliable vertical rhythm for CJK or correct shaping and line-breaking behaviour for Arabic scripts. Get a native reader to review that work.
09 Guides that use it
Put it to work.
Long-form playbooks where this skill does part of the job.
One skill, one command.
Install Web Typography, or the whole stack.
npx skills add wondelai/skills/web-typography --global MIT licensed · Claude, Claude Code, Codex, Cursor, OpenClaw, Hermes · No account