Vertical rhythm is the consistent vertical spacing between lines of text and elements on a page, created by aligning them to a shared baseline grid. It gives a layout a sense of order and predictability as the eye moves down the page.
‍
Typically, this rhythm is established by setting line heights, margins, and paddings as multiples of a base unit, such as your body text's line height. When every element follows the same rhythm, the whole page feels harmonious rather than arbitrary.

Why does Vertical Rhythm matter?

Good vertical rhythm makes long-form content easier to scan and read, since consistent spacing helps users predict where the next line or section begins. It also keeps a design system visually consistent across pages, since headings, paragraphs, and components all snap to the same underlying grid.

For example, if your base line height is 24px, you'd set heading margins, image spacing, and paragraph gaps as multiples of 24px, so everything lines up neatly whenever it's placed side by side or stacked.

Similar