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
Design Debt
What is Design Debt Design Debt refers to the accumulated con...
Redlining
What is Redlining? Redlining is the process of adding detaile...
Clickstream Analysis
What is Clickstream Analysis Clickstream Analysis is the proc...
False Consensus Effect
What is the False Consensus Effect The False Consensus Effect...
User-Centered Design
What is User-Centered Design User-Centered Design (UCD) is a ...
Multi-Channel Testing
What is Multi-Channel Testing Multi-Channel Testing is the pr...
