Real file from a public repo · synced Sep 3, 2026
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.
Works with
Install in three steps
- 1
Download the ZIP
One file per agent, plus INSTALL.md with the exact paths below.
- 2
Claude Code: copy SKILL.md into your skills folder
.claude/skills/web-typography/SKILL.md # this project ~/.claude/skills/web-typography/SKILL.md # every project
- 3
Other agents: use the matching file
skill.mdc goes in Cursor’s .cursor/rules/. AGENTS.md works as GitHub Copilot instructions, a legacy .cursorrules, or a Codex / Gemini CLI instructions file.

