Apply professional typography principles to create readable, hierarchical, and aesthetically refined interfaces. Use when setting type scales, choosing fonts, adjusting spacing, designing text-heavy layouts, implementing dark mode typography, or when asked about readability, font pairing, line height, measure, typographic hierarchy, variable fonts, font loading, or OpenType features.
View on GitHubskills/typography/SKILL.md
February 5, 2026
Select agents to install to:
npx add-skill https://github.com/petekp/agent-skills/blob/main/skills/typography/SKILL.md -a claude-code --skill typographyInstallation paths:
.claude/skills/typography/# Typography Professional typography for user interfaces, grounded in principles from the masters. > "Typography exists to honor content." — Robert Bringhurst ## Reference Files For detailed guidance on specific topics, consult these references: | Topic | When to Read | |-------|--------------| | [masters.md](references/masters.md) | Seeking authoritative backing, making nuanced judgments, understanding "why" | | [variable-fonts.md](references/variable-fonts.md) | Using variable fonts, fluid weight, performance optimization | | [font-loading.md](references/font-loading.md) | FOIT/FOUT issues, preloading, Core Web Vitals, self-hosting | | [opentype-features.md](references/opentype-features.md) | Ligatures, tabular numbers, stylistic sets, slashed zero | | [fluid-typography.md](references/fluid-typography.md) | clamp(), text-wrap, truncation, vertical rhythm, font smoothing | | [tailwind-integration.md](references/tailwind-integration.md) | Tailwind typography utilities, prose plugin, customization | | [internationalization.md](references/internationalization.md) | RTL languages, Arabic/Hebrew, CJK, bidirectional text | ## Output Formats ### Type System Recommendations ```markdown ## Type System ### Scale - Base: [size, e.g., 16px] - Ratio: [e.g., Minor Third 1.200] - Rationale: [why this ratio] ### Hierarchy | Level | Size | Weight | Line Height | Letter Spacing | Use | |-------|------|--------|-------------|----------------|-----| | Display | ... | ... | ... | ... | Hero, marketing | | H1 | ... | ... | ... | ... | Page titles | | H2 | ... | ... | ... | ... | Section heads | | Body | ... | ... | ... | ... | Paragraphs | | Small | ... | ... | ... | ... | Captions, labels | ### Fonts - Primary: [font] — [rationale] - Secondary: [font, if applicable] - Mono: [font, if applicable] ### Implementation [Ready-to-use CSS/Tailwind] ``` ### Typography Audits ```markdown ## Typography Audit ### Issues | Element | Problem | Recommendation | |---------|---------|--