UX Glossary · W

White space

Also: Negative space

The empty area around and between elements, which does the grouping and pacing work in a layout.

White space is the space between and around elements. It need not be white; the term comes from print, where the paper was.

It is not leftover room. It is the primary instrument for grouping, and the Gestalt principles explain why: proximity is the strongest grouping cue available, stronger than borders or colour.

Macro and micro

Macro white space separates the major regions of a layout and sets its pace. Micro white space is the smaller spacing between a label and its field, lines of text, or items in a list. Micro is where most layouts are actually won or lost.

The classic form-design error is a label sitting equidistant between two fields. The eye assigns it to whichever is nearer, and if that is the wrong one, users fill in the wrong box. Tightening the space between a label and its own field and increasing it between groups fixes more errors than rewriting the labels.

The pressure against it

Space is always the first thing sacrificed when someone wants more above the fold. The argument that a denser page shows more is true and incomplete: it shows more and communicates less, because nothing is grouped and nothing is prioritised.

In practice

Use a spacing scale rather than judging by eye. Values drawn from a 4 or 8 pixel base produce rhythm; arbitrary values produce an interface that feels unresolved without an obvious cause.

Knowing the words is the easy part.

If you'd rather have someone apply them to your product, that's what I do.