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
Interaction Design
What is Interaction Design Interaction Design (IxD) is the pr...
Progressive Disclosure
What is Progressive Disclosure Progressive Disclosure is a de...
Design System
What is a Design System A Design System is a complete collect...
User Scenarios
What are User Scenarios User Scenarios are narrative descript...
Redlining
What is Redlining? Redlining is the process of adding detaile...
Hick's Law
What is Hick's Law Hick's Law states that the time it takes t...