Typographic Hierarchy Skill

This skill establishes clear, intentional typographic hierarchy — using scale, weight, spacing, color contrast, and rhythm to guide the reader's eye and communicate structure at a glance.

Core Concepts

Typographic hierarchy works across six levers. You rarely need all six — pick the fewest levers that achieve the contrast needed:

Lever	Effect
Size	The primary signal. Double the size = double the dominance.
Weight	Bold reads first. 700+ for dominant labels, 300–400 for supporting copy.
Color / Opacity	Muted gray for secondary text. High-contrast black/white for focal points.
Letter-spacing	Tight for large display text. Wide (0.05–0.2em) for ALL-CAPS labels.
Line-height	Looser (1.6–1.8) for body. Tighter (1.0–1.2) for large headings.
Space (margin/padding)	Space above a heading = visual importance. Use generously.

typographic-hierarchy

Typographic Hierarchy Skill

Core Concepts