Typography

This is a comprehensive typographic system grounded in principles from Bringhurst, Vignelli, and other masters. It covers type scales with specific ratios, line height guidelines for different contexts, font pairing rules, and modern CSS features like text-wrap balance and clamp() for fluid typography. The skill includes ready-to-use recommendations with actual numbers (16px minimum body text, 45-75 character line length, 1.5-1.7 line height) and detailed reference files on variable fonts, font loading, OpenType features, and internationalization. What stands out is the restraint it preaches: one or two font families maximum, stick to your scale, and let whitespace do the work. It's opinionated in a good way.

skills.sh installs: 526
GitHub stars: 10
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add petekp/agent-skills --skill typography --agent claude-code

Installs into .claude/skills of the current project.

Files

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	Seeking authoritative backing, making nuanced judgments, understanding "why"
variable-fonts.md	Using variable fonts, fluid weight, performance optimization
font-loading.md	FOIT/FOUT issues, preloading, Core Web Vitals, self-hosting
opentype-features.md	Ligatures, tabular numbers, stylistic sets, slashed zero
fluid-typography.md	clamp(), text-wrap, truncation, vertical rhythm, font smoothing
tailwind-integration.md	Tailwind typography utilities, prose plugin, customization
internationalization.md	RTL languages, Arabic/Hebrew, CJK, bidirectional text