Vertical Rhythm
UX Design
What is Vertical Rhythm
Vertical Rhythm is a design principle that establishes consistent spacing and alignment between elements down a page. It creates a regular cadence in the layout, similar to lines on ruled paper, helping to organize content and improve readability.
Components of Vertical Rhythm
Key elements include:
- Baseline Grid: Regular vertical spacing increments
- Line Height: Consistent spacing between text lines
- Margins: Spacing between content blocks
- Padding: Internal element spacing
How to implement Vertical Rhythm
Create vertical rhythm by establishing a base unit (often the line height of body text), then using multiples of this unit for all vertical spacing. Maintain consistent proportions across different screen sizes and devices.
Benefits of Vertical Rhythm
This technique creates visual harmony, improves content readability, establishes a professional appearance, and helps users scan and comprehend content more effectively. It provides a structured foundation for responsive layouts.
Find your next job!
Common base units are 8px or 16px, as they're easily divisible and work well across different screen sizes. Choose based on your typography and design system needs.
Use flexible multiples of your base unit, create content-specific adjustments while maintaining the overall rhythm, and establish clear rules for exceptions.
es, but it may need adaptation. Mobile designs often benefit from tighter spacing while maintaining proportional relationships between elements.
UX Design Terms
See more UX Design terms
Net Promoter Score
What is Net Promoter Score Net Promoter Score (NPS) is a cust...
Design Patterns
What are Design Patterns Design Patterns are reusable solutio...
UI Elements
What are UI Elements UI Elements are the individual component...
Low Fidelity Design
What is Low Fidelity Design Low Fidelity Design (Lo-Fi) refer...
User-Centered Design
What is User-Centered Design User-Centered Design (UCD) is a ...
Task Analysis
What is Task Analysis Task Analysis is a systematic process o...
