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.
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 Thinking
What is Design Thinking Design Thinking is a human-centered a...
Beta Testing
What is Beta Testing Beta Testing is the pre-release testing ...
Parametric Searching
What is Parametric Searching Parametric Searching is a refine...
User Scenarios
What are User Scenarios User Scenarios are narrative descript...
Call-To-Action
What is a Call-To-Action A Call-To-Action (CTA) is a design e...
Brainstorming
What is Brainstorming Brainstorming is a collaborative ideati...