The Grid We Feel

Vertical Rhythm is when all elements on the page (text, headings, images) are aligned along an invisible horizontal grid. This makes reading subconsciously comfortable.

Baseline Rule:

1. Choose a base line-height (e.g., 24px).
2. All margins (margin, padding) and block heights should be multiples of this number (24, 48, 72...).

:root { --base-line: 1.5rem; /* 24px */ }

h1 { 
  line-height: calc(var(--base-line) * 2); 
  margin-bottom: var(--base-line); 
}

p { 
  line-height: var(--base-line); 
  margin-bottom: var(--base-line); 
}