Gutter width is what keeps columns from reading as one stream
Aliases: gutter · column gap · alley
What it is
The gutter is the empty strip between two columns of matter. Its width decides whether those columns are parallel streams or one sentence folded in half. When a newspaper alley is too tight, the eye joins the last word of the left column to the first word of the right — not a margin problem, not a page-ratio problem, just a gutter that failed to cut.
Dashboards do the same: an 8 px seam between metric columns glues the numbers into one table and kills “each column is an object.”
Why it happens
Columns share a vertical alignment and sit next to each other, so the visual system’s default is to continue the reading path across the gap. The gutter is the only interruption on that path. It has to be wide enough for proximity to say “different group,” and not so wide that the columns become unrelated islands.
Borders and shadows can also partition, but they introduce a different object (a card). A gutter’s job is to partition with empty space alone. That is why gutter and column width travel together: at 140 px columns, a 24 px gutter is a large fraction and the columns look like two scraps; at 400 px columns, 8 px all but vanishes and the path crosses.
Where it stops holding
Single-column layouts have no gutter. If cards already group by stroke or fill, the gutter shares the cutting job and can run narrower — until copy still reads across the alley, at which point the stroke does not save it.
Vertical type and RTL multi-column still use the gutter as the inter-column break; only the direction of crossing flips. Print alley rules do not paste in as screen pixels: scrolling and dynamic type mean the gutter should move with type size and column width.
Applying it
- For any two-or-more-column body, plant a sentence that breaks at a line end and watch whether the eye continues into the neighbour column.
- Express gutter as a fraction of column width (order of 1/8 to 1/4) rather than one frozen pixel for the whole product.
- How to check: cover the gutter with a translucent strip. If the two columns immediately read as one article, the gutter is too tight. Widen toward about one line-height; if the columns then feel unrelated, it is too open. Keep the stop that cuts without breaking the page into islands.