Section 5 · Visual Language

Gutter

Definition

The fixed space between columns, or between grid units, that keeps adjacent content from visually merging together.

Why it matters

Without consistent gutters, columns of text or images crowd each other and the underlying grid becomes hard to perceive.

Example

A consistent 20 px gutter between every column, regardless of how many columns are active on a given page.