web-typography
web typography
What it does
- Saccades — eyes jump in 7-9 character bursts; line length and letter spacing directly affect saccade efficiency
- Fixations — eyes pause briefly to absorb content; dense or poorly spaced text slows reading
- Word shapes (bouma) — experienced readers recognize word silhouettes, not individual letters
- Structural assessment — generous x-height (better screen readability), open counters and apertures (a, e, c), distinct letterforms (Il1, O0, rn vs. m)
- Practical needs — test at actual use sizes on target screens, check file size, verify the license
- Real content testing — Lorem ipsum hides problems with character frequency, word length, and paragraph rhythm
- Define the job first — body text, headlines, and UI elements may each need different faces
Requirements & configuration
- See: references/typeface-anatomy.md when you need to name letterform parts (x-height, counter, aperture) or place a face in a classification system to justify a choice.
- Practical needs — test at actual use sizes on target screens, check file size, verify the license
- Define the job first — body text, headlines, and UI elements may each need different faces
- Match tone to content — a financial report needs a different voice than a bakery menu
- Line height — 1.4-1.8 for body; longer lines need more; headlines need tighter (1.1-1.25)
Derived from the skill's own SKILL.md documentation · extracted 2026-07-23
web-typography FAQ
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-design. Saccades — eyes jump in 7-9 character bursts; line length and letter spacing directly affect saccade efficiency Fixations — eyes pause briefly to absorb content; dense or poorly spaced text slows reading
What does web-typography require?
See: references/typeface-anatomy.md when you need to name letterform parts (x-height, counter, aperture) or place a face in a classification system to justify a choice. Practical needs — test at actual use sizes on target screens, check file size, verify the license Define the job first — body text, headlines, and UI elements may each need different faces Match tone to content — a financial report needs a different voice than a bakery menu Line height — 1.4-1.8 for body; longer lines need more; headlines need tighter (1.1-1.25)
How do I install web-typography?
Run: npx -y skills add https://github.com/wondelai/skills --skill web-typography --agent claude-code — the source lives at github.com/wondelai/skills.
Maintain web-typography?
Let people know it's listed here — add the badge (live metrics, light/dark aware) or a plain link to your README or docs.
[](https://getagentictools.com/skills/wondelai-skills-web-typography?ref=badge) npx agentictools info skills/wondelai-skills-web-typography The second line is the CLI lookup for this page — handy in READMEs and docs.
