vocab.design

layout

Whitespace

also called negative space (community), white space (community), breathing room (community), macro whitespace (community), micro whitespace (community)

The empty area between and around elements, treated as an active design material rather than as leftover space.

Whitespace is not white and it is not empty. The word comes from print, where the unprinted paper was literally white, and it survives because there is no better name for the material. Any background colour counts, an image counts, and a dark theme is full of it. What makes it whitespace is that nothing has been placed there on purpose, which is a different thing from nothing being there.

Its real job is grouping, and that is the part that gets argued about as decoration. Proximity is the strongest grouping signal a layout has: things placed close together are read as belonging together, before anyone has read a word of them. Put a price right under a product name and two millimetres of space between that pair and the next one, and the reader gets the structure for free. Space everything evenly and the reader has to work the structure out from the content, which is slower and less reliable, no matter how good the content is. This is why spacing scales exist. A scale with a few widely separated steps produces grouping; a scale of near neighbours produces a wall.

The usual split is macro and micro. Macro whitespace is the space between the big parts, sections, columns, the margin around a page, and it sets the pace at which a page is read. Micro whitespace is the space inside and between small things: the leading between lines, the tracking between letters, the padding inside a button, the gap between a label and its field. Micro whitespace is what makes text legible rather than merely present, and it is usually the first thing lost when a design is squeezed into a smaller viewport.

The pressure is always to fill it. Whitespace looks like wasted room in a review, it pushes content below the fold, and it is hard to defend against a stakeholder holding a list of things that must be visible. The defence is to talk about it as work rather than as taste: this space is what tells the reader those two lines are one thing, and removing it does not add information, it removes structure. Sites that read as calm and expensive are usually not doing anything clever. They are just spending space.

Which word?

If you wantsay
the empty space doing the grouping workwhitespace
arguing that spacing, not lines, makes groupsproximity
the outer breathing room, set once by the systemlayout margins
the empty element that does the spacingspacer

Related

See also: Minimalism · Typographic color

Sources