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
Contextual Enquiry
What is Contextual Enquiry Contextual Enquiry is a field rese...
User Research
What is User Research User Research is a systematic investiga...
Design System
What is a Design System A Design System is a complete collect...
User Flow
What is a User Flow A User Flow is a visual representation of...
Persona
What is a Persona A Persona is a fictional character that rep...
MVP
What is an MVP MVP (Minimum Viable Product) is a development ...