Typography
Hierarchy
typographylayoutstructurevisual weight
The visual order of text from most to least important — typically headline → subheading → body → caption.
When to use
- Any multi-level text layout
- Guiding the user's eye to the most important information first
- Creating scannable layouts where users skim before reading
Examples
- H1 at 48px, H2 at 24px, body at 16px, caption at 12px
- Article lede larger than body paragraphs
See this in the wild
Analyze a site and look for hierarchy in the breakdown.
