Typography System

This walks you through building typography systems from first principles. You'll learn modular scales (like the 1.25 Major Third ratio that generates harmonious size progressions), how to pair fonts with intention, and set up proper hierarchy using weight, color, and spacing. It covers the practical stuff like line height ratios for headings versus body text, implementing fluid typography with clamp, and ensuring WCAG contrast ratios. The Tailwind config examples are immediately useful, and the emphasis on mathematical scales over arbitrary sizing is the right way to think about type. Good for anyone tired of picking font sizes by feel.

skills.sh installs: 260
GitHub stars: 37
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add sanky369/vibe-building-skills --skill typography-system --agent claude-code

Installs into .claude/skills of the current project.

Files

Typography System

Produce a working type scale for this codebase — tokens wired into the existing styling system and applied to real headings/body/UI text — not an essay about type. Governing principle: sizes come from a modular scale chosen for the product's density; readability constraints (line-height, measure, contrast) are non-negotiable and override aesthetics.

When to use / handoffs

Use for type scales, font selection/loading, heading hierarchy, readability fixes, fluid type.
No token infrastructure at all yet → run skills/frontend-design/design-foundation first (or create the type tokens as its first slice).
Text colors failing contrast is shared ground with skills/frontend-design/color-system — fix the pairs you touch here; send palette-wide work there.
Headings sized right but the page still scans poorly → skills/frontend-design/visual-hierarchy-refactoring.