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.
On Web Typography
npx skills add wondelai/skills/web-typography --global This skill is compatible with Claude, Claude Code, Claude Cowork, Codex, Cursor, OpenClaw, Hermes Agent, and other agentskills.io-compatible agents.
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.
Key concepts from On Web Typography your agent applies
Typeface Selection
Evaluate typefaces based on their personality, legibility at various sizes, and glyph coverage.
Typographic Scale
Build a modular scale that creates harmonious relationships between heading and body sizes.
Measure & Line Height
Set optimal line length (45-75 characters) and line height for comfortable reading.
Font Pairing
Combine typefaces that complement each other through contrast in style, weight, or structure.
Responsive Typography
Use fluid type sizing and viewport-aware adjustments for readability across devices.
When to use Web Typography — and when not to
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.
Example prompts for the Web Typography skill
Select a font pairing for my SaaS marketing site using web-typography skill
Brand typographySet up a responsive typographic scale using CSS clamp() using web-typography skill
ImplementationImprove the readability of my blog post template using web-typography skill
Content designAudit my site's typography for consistency and hierarchy using web-typography skill
Design reviewWeb Typography vs the other Design & UX skills
All 9 Design & UX skills are free and install the same way — the only question is which framework fits the job in front of you.
| Skill | Based on | Best for |
|---|---|---|
| Refactoring UI | Refactoring UI — Adam Wathan & Steve Schoger | Practical UI design system |
| iOS HIG Design | Human Interface Guidelines — Apple | Native iOS app design guidelines |
| UX Heuristics | Don’t Make Me Think — Steve Krug & Jakob Nielsen | Usability evaluation and principles |
| Web Typography | On Web Typography — Jason Santa Maria | Web typography principles and implementation |
| Design of Everyday Things | The Design of Everyday Things — Don Norman | Foundational design principles: affordances, signifiers, feedback |
| Top Design | Elite Agency Techniques — Locomotive, Studio Freight, AREA 17 | Award-winning 10/10 web design |
| Lean UX | Lean UX — Jeff Gothelf & Josh Seiden | Collaborative, experiment-driven UX design |
| Microinteractions | Microinteractions — Dan Saffer | Designing details that delight users |
| Steve Jobs Design Review | Steve Jobs — Walter Isaacson | Jobs-style reviews: ruthless simplicity, focus, binary verdicts |
Frequently asked questions
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.
Guides that use this skill
Install Web Typography
Free, open-source, and ready in 30 seconds.
npx skills add wondelai/skills/web-typography --global MIT Licensed · Works with Claude, Claude Code, Claude Cowork, Codex, Cursor, OpenClaw, Hermes Agent & other agentskills.io agents · No account needed
Don’t guess your AI engineering level.
Measure it.
AI Developer Scorecard
How production-grade is your AI engineering?
Twenty-five questions across the practices that separate vibe-coding from production-grade engineering. Instant score, per-section breakdown, and a 30/60/90-day playbook.
Score 0–75 · 30/60/90-day playbook Score yourself For CTOs & foundersCTO Scorecard
Is your engineering team ready for AI at scale?
Twenty-five questions on how your org adopts AI — adoption, governance, automation, and ROI. See where you sit on the path from Reactive to Strategic Leader.
Score 0–75 · Reactive → Strategic Leader Score your orgWe build the skills you already use. Now we’ll build yours.
Sprints from $3K · shipped to production, or you don’t pay the final milestone.