Typography Hierarchy
Master font size relationships, weight variations and visual hierarchy design
Understanding Typography Hierarchy
What is Typography Hierarchy?
Typography hierarchy is the organization of text elements by importance, using visual cues like size, weight, color, and spacing to guide readers through content in a logical order.
- Establishes content importance and flow
- Improves readability and comprehension
- Creates visual interest and balance
- Guides user attention and navigation
Font Size Hierarchy
Size Scale Principles
Create a consistent and harmonious size scale for your typography system.
- Use mathematical ratios (1.25, 1.5, 2)
- Maintain clear size differences
- Consider readability at each size
- Test across different devices
Common Size Scales
Popular typography scales used in design systems.
- Perfect Fourth: 1.333 ratio
- Perfect Fifth: 1.5 ratio
- Golden Ratio: 1.618 ratio
- Modular Scale: Custom ratios
Font Weight Hierarchy
Weight Selection Strategy
Choose font weights that create clear visual distinction while maintaining readability.
Primary Weights
- Light (300): Subtle emphasis
- Regular (400): Body text
- Medium (500): Medium emphasis
- Bold (700): Strong emphasis
Usage Guidelines
- Limit to 2-3 weights per font
- Use weight for hierarchy, not decoration
- Ensure sufficient contrast
- Test on different screens
Weight Hierarchy Examples
Common hierarchy patterns:
- Headlines: Bold (700)
- Subheadings: Medium (500)
- Body text: Regular (400)
- Captions: Light (300)
Spacing and Layout
Line Height (Leading)
Proper line height improves readability and visual hierarchy.
- Headlines: 1.1-1.3 line height
- Body text: 1.4-1.6 line height
- Long text: 1.6-1.8 line height
- Consider font characteristics
Letter Spacing (Tracking)
Adjust letter spacing for different text sizes and purposes.
- Headlines: Tighter spacing
- Body text: Normal spacing
- Small text: Looser spacing
- All caps: Increased spacing
Visual Hierarchy Techniques
Color and Contrast
Use color and contrast to enhance typography hierarchy.
Color Hierarchy
- Primary text: High contrast
- Secondary text: Medium contrast
- Tertiary text: Lower contrast
- Accent colors: Strategic use
Contrast Guidelines
- Minimum 4.5:1 for body text
- 3:1 for large text
- Test with color blindness
- Consider background variations
Layout and Positioning
Use layout techniques to reinforce typography hierarchy.
- Whitespace to separate sections
- Alignment for visual order
- Indentation for subordination
- Grid systems for consistency
Responsive Typography
Mobile-First Hierarchy
Simplified Hierarchy
Reduce hierarchy levels on small screens
Touch-Friendly Sizing
Ensure text is readable and tappable
Progressive Enhancement
Add complexity as screen size increases
Create Effective Typography Hierarchy
Master typography hierarchy to create clear, readable, and visually appealing content that guides users effectively.