---
title: Spacing and Proximity
slug: spacing-and-proximity
kind: grammar
summary: Whitespace is the primary grouping mechanism. Things that belong together sit close; things that do not sit apart — and uniform padding everywhere is a decision not to have grouped anything.
problem: >-
  A screen is spaced by habit — the same gap between everything — so the eye
  gets no help working out which label goes with which field, which buttons
  belong to which record, or where one section ends.
family: [scan]
principles: [minimize-distance]
status: stable
visibility: public
related:
  - title: Minimize distance
    url: /patterns/minimize-distance
    summary: The principle this is the mechanism for.
  - title: Visual Hierarchy
    url: /patterns/visual-hierarchy
    summary: The companion — proximity groups, hierarchy ranks.
---

## The rule

**Related things are closer to each other than to anything else.** That is the
whole of it, and it is a rule about *relative* distance, not absolute values.

A label 4px from its field and 16px from the next field is grouped. The same
label 12px from both is ambiguous, and the reader has to work out the pairing
from meaning instead of from position — which is slower and occasionally wrong.

Grouping by proximity beats every other mechanism available. Borders, boxes and
background tints all work, but they add ink; space groups for free.

## The three spacings that matter on any screen

| Gap | What it separates | Rough ratio |
|---|---|---|
| **Tight** | A label and its value; an icon and its text | 1 |
| **Medium** | Sibling items inside a group; rows in a list | 2–3× tight |
| **Loose** | One group from the next; sections of a page | 5–8× tight |

If your medium and loose gaps are the same number, you have two levels of
structure rendered as one, and the page reads as a flat list of everything.

## Use a scale, not arbitrary numbers

Pick a small set — 4, 8, 12, 16, 24, 32, 48 — and use only those. The reason is
not tidiness. It is that **a limited set forces the relative decisions to be
deliberate**: choosing between 16 and 24 is a real choice about grouping,
whereas choosing 19 is an accident that reads as noise.

Consistency in spacing is also what makes a screen feel finished. Most pages
that "look unpolished" have no typographic problem at all; they have six
different gaps that mean nothing.

## Where it goes wrong in practice

- **Uniform padding everywhere.** Every element in its own equal box. Nothing is
  grouped, so the reader groups by reading.
- **Labels floating between two fields**, ambiguous by position.
- **Buttons equidistant from two records** in a list, so it is genuinely unclear
  which row they act on — this one causes real errors, not just slowness.
- **Section gaps smaller than internal gaps**, which visually merges sections
  that are logically separate.
- **Cards inside cards inside cards**, where nesting substitutes for spacing and
  every level adds a border.
- **Whitespace treated as free.** On a long list it is not: every extra pixel of
  row height is a row that fell off the screen, and comparison is the thing you
  are spending it on.

## The relationship to density

Spacing and density pull in opposite directions and both are correct in
different places. Generous space between a *few* important things aids focus.
The same space between *many* comparable things destroys comparison, because
distance is exactly what makes comparing expensive.

So the question is never "is this page too tight or too loose" — it is **what is
this screen for**. A record page can breathe. A queue of two hundred rows
cannot.

## The test

Squint, or shrink the browser to 25%. You should see distinct clumps that match
the logical structure. If it is one even grey field, nothing is grouped; if it
is scattered islands with no relationship, the levels are wrong.