# Web Typography > Web typography principles and implementation — an AI agent skill based on *On Web Typography* by Jason Santa Maria. Published 2026-02-19 · Updated 2026-08-17 · Design & UX · Free and MIT-licensed Canonical: https://skills.wondel.ai/skills/web-typography/ Source: https://github.com/wondelai/skills/tree/main/web-typography **Install:** `npx skills add wondelai/skills/web-typography --global` ## 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. ## About Jason Santa Maria Award-winning designer, former creative director of A List Apart. Jason Santa Maria is an award-winning graphic designer and creative director who shaped web typography at Typekit (now Adobe Fonts). He served as creative director of A List Apart and co-founded Typedia. The book: https://openlibrary.org/books/OL44767323M/On_web_typography ## Example prompts - Select a font pairing for my SaaS marketing site using web-typography skill _(Brand typography)_ - Set up a responsive typographic scale using CSS clamp() using web-typography skill _(Implementation)_ - Improve the readability of my blog post template using web-typography skill _(Content design)_ - Audit my site's typography for consistency and hierarchy using web-typography skill _(Design review)_ ## 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. ## Related - All Design & UX skills: https://skills.wondel.ai/skills/design/ - Refactoring UI: https://skills.wondel.ai/skills/refactoring-ui/ - iOS HIG Design: https://skills.wondel.ai/skills/ios-hig-design/ - UX Heuristics: https://skills.wondel.ai/skills/ux-heuristics/ - Design of Everyday Things: https://skills.wondel.ai/skills/design-everyday-things/ - Top Design: https://skills.wondel.ai/skills/top-design/ - Lean UX: https://skills.wondel.ai/skills/lean-ux/ - Microinteractions: https://skills.wondel.ai/skills/microinteractions/ - Steve Jobs Design Review: https://skills.wondel.ai/skills/steve-jobs-design-review/