Appearance
Vertical Rhythm
Vertical rhythm is a systematic approach to setting the spacing between all elements on a page to create a mathematical, consistent flow. This structure is essential for adding a sense of order and professional polish to a website, ensuring that the content is easy for users to scan and consume.
Key Components
Key components for establishing vertical rhythm include:
The Baseline Grid: Vertical rhythm starts with a baseline, which is the invisible line upon which all typography sits. Designers often use a 4pt grid system, leading to a baseline that is a multiple of four, such as 12px. This grid acts as a guide for all typography, margins, and padding across the page.
Calculated Line Height: Setting a consistent line height is the next step in creating rhythm. A standard of 1.5em (150%) is recommended for body text because it ensures accessibility and makes calculating the vertical rhythm easier by providing round numbers (e.g. 16px font × 1.5 = 24px line height). For larger headings, the line height is often reduced to between 120% and 140% to prevent multiline titles from looking too disconnected.
Consistent Spacing: To maintain the rhythm, all margins and padding should be multiples of the baseline grid (e.g. 12px, 24px, 48px). Even if a specific font size or line height doesn't perfectly match a multiple of the baseline, designers can use "math for vertical rhythm" to add specific margins that bring the following elements back "on the grid".
Hierarchy and Proximity: Spacing is also used to reinforce relationships between content. Elements within the same group should have less margin, while separate sections should be spaced further apart—though always in multiples of the established baseline—to signal a change in topic to the user.
Mathematical Order: By following these rules, a developer creates an organized flow where everything feels connected, making the user interface feel less cluttered and more harmonious.
