Skill: Apply Typography Scale

Purpose

Core Rules

1. Hand-crafted, not mathematical — Avoid modular scales with fractional pixels
2. Use px or rem, never em — Prevents compounding issues
3. Minimum 25% jumps — 16px → 20px (25%), not 16px → 18px (12.5%)
4. Two weights only — 400/500 normal, 600/700 bold
5. Never < 400 for UI — Too hard to read at small sizes

Recommended Scales

Marketing Page

Hero:     48-60px,  weight 700,  line-height 1.1
H1:       36-40px,  weight 700,  line-height 1.2
H2:       28-32px,  weight 600,  line-height 1.3
Body:     16-18px,  weight 400,  line-height 1.6
Small:    14px,     weight 400,  line-height 1.6
Caption:  12px,     weight 400,  line-height 1.5

Application/Dense UI

H1:     30-36px,  weight 700
H2:     24px,     weight 600
H3:     20px,     weight 600
H4:     16px,     weight 600
Body:   14-16px,  weight 400
Small:  12-13px,  weight 400

Line-Height Rules

• Small text (12-14px): 1.6-1.7 (needs help finding next line)
• Body text (16px): 1.5-1.6
• Large headlines (30px+): 1-1.2 (needs less help)

Line Length

• Optimal: 45-75 characters per line
• Max-width: 20-35em for paragraphs
• Wide paragraphs: Increase line-height to 1.8-2.0

Decision Criteria

PASS

• Scale uses a small set of intentional sizes with clear jumps between roles
• Type hierarchy combines size, weight, line-height, and color
• Body text remains readable across marketing, app, and content contexts
• Line length and line-height fit the reading context

FAIL

• Scale relies on tiny increments that do not create hierarchy
• Font weights are too light for UI text
• Long-form text lines are too wide or cramped

• em

  sizing compounds unpredictably in nested elements

Common Failure Modes

1.25em

0.875em

px

rem

Examples

examples/typography-scale/

References

• references/hand-crafted-scales.md

• references/avoid-em-units.md

• references/line-height-proportion.md