web-typography
Select, pair, and implement typefaces for web projects. Use when the user mentions "font pairing", "which typeface", "line height", "responsive typography", "web font loading", "type hierarchy", "variable fonts", "FOUT/FOIT", "typographic scale", or "the text is hard to read". Also trigger when choosing between system fonts and web fonts, optimizing font-loading performance, or designing readable long-form content. Covers readability evaluation, CSS implementation, and performance optimization. For overall UI design systems, see refactoring-ui. For dramatic typographic experiences, see top-des
npx skills add wondelai/skills --skill web-typography --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# Web Typography A practical guide to choosing, pairing, and implementing typefaces for the web. The best typography is invisible — it immerses readers in content rather than calling attention to itself. ## Core Principle **Typography is the voice of your content.** The typeface you choose sets tone before a single word is read — a legal site shouldn't feel playful; a children's app shouldn't feel corporate. Follow the "clear goblet" principle: typography should be like a crystal-clear wine glass, keeping focus on the wine (content), not the glass (type). ## Scoring **Goal: 10/10.** Score = number of the 10 Quick Diagnostic rows the implementation satisfies. Bands: **9-10** = body 16px+, measure under 75ch, line-height 1.4+, clear level contrast, font payload under 200KB, fallbacks set, survives 200% zoom; **5-6** = readable but missing measure control, fallbacks, or zoom resilience; **<=3** = sub-16px body, no measure cap, FOIT, or unreadable hierarchy. Always state the current score and the specific diagnostic rows failing. ## Two Contexts for Type All typography falls into two categories: | Context | Purpose | Priorities | |---------|---------|------------| | **Type for a moment
- Core Principle
- Scoring
- Two Contexts for Type
- Typography Framework
- 1. How We Read
- 2. Evaluating Typefaces
- 3. Choosing Typefaces
- 4. Pairing Typefaces
- 5. Typographic Measurements
- 6. Building Type Hierarchies
- 7. Responsive Typography and Web Font Performance
- Common Mistakes
- Quick Diagnostic
- Further Reading
What does the web-typography skill do?
Select, pair, and implement typefaces for web projects. Use when the user mentions "font pairing", "which typeface", "line height", "responsive typography", "web font loading", "type hierarchy", "variable fonts", "FOUT/FOIT", "typographic scale", or "the text is hard to read". Also trigger when choosing between system fonts and web fonts, optimizing font-loading performance, or designing readable long-form content. Covers readability evaluation, CSS implementation, and performance optimization. For overall UI design systems, see refactoring-ui. For dramatic typographic experiences, see top-des
How do I install it?
Run `npx skills add wondelai/skills --skill web-typography --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From wondelai/skills, a repository with 1,835 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.