Agent skill · wondelai
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-design.
What it needs
About 11k tokens when loaded.
What this skill does
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 Headlines, buttons, navigation, logos Personality, impact, distinctiveness Type to live with Body text, articles, documentation Readability, comfort, endurance Workhorse typefaces excel at "type to live with" — versatile across sizes, weights, and contexts without drawing attention. Examples: Georgia, Source Sans, Freight Text, FF Meta. Typography Framework 1. How We Read Core concept: Understanding reading mechanics is the foundation for every typography decision. Eyes don't scan smoothly — they jump in bursts. Why it works: Fighting these mechanics creates friction that drives readers away; aligning with them lets readers absorb content faster with less fatigue. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills wondelai/web-typography--393e61