{"slug":"spacing-and-proximity","meta":{"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."}]},"body":"## The rule\n\n**Related things are closer to each other than to anything else.** That is the\nwhole of it, and it is a rule about *relative* distance, not absolute values.\n\nA label 4px from its field and 16px from the next field is grouped. The same\nlabel 12px from both is ambiguous, and the reader has to work out the pairing\nfrom meaning instead of from position — which is slower and occasionally wrong.\n\nGrouping by proximity beats every other mechanism available. Borders, boxes and\nbackground tints all work, but they add ink; space groups for free.\n\n## The three spacings that matter on any screen\n\n| Gap | What it separates | Rough ratio |\n|---|---|---|\n| **Tight** | A label and its value; an icon and its text | 1 |\n| **Medium** | Sibling items inside a group; rows in a list | 2–3× tight |\n| **Loose** | One group from the next; sections of a page | 5–8× tight |\n\nIf your medium and loose gaps are the same number, you have two levels of\nstructure rendered as one, and the page reads as a flat list of everything.\n\n## Use a scale, not arbitrary numbers\n\nPick a small set — 4, 8, 12, 16, 24, 32, 48 — and use only those. The reason is\nnot tidiness. It is that **a limited set forces the relative decisions to be\ndeliberate**: choosing between 16 and 24 is a real choice about grouping,\nwhereas choosing 19 is an accident that reads as noise.\n\nConsistency in spacing is also what makes a screen feel finished. Most pages\nthat \"look unpolished\" have no typographic problem at all; they have six\ndifferent gaps that mean nothing.\n\n## Where it goes wrong in practice\n\n- **Uniform padding everywhere.** Every element in its own equal box. Nothing is\n  grouped, so the reader groups by reading.\n- **Labels floating between two fields**, ambiguous by position.\n- **Buttons equidistant from two records** in a list, so it is genuinely unclear\n  which row they act on — this one causes real errors, not just slowness.\n- **Section gaps smaller than internal gaps**, which visually merges sections\n  that are logically separate.\n- **Cards inside cards inside cards**, where nesting substitutes for spacing and\n  every level adds a border.\n- **Whitespace treated as free.** On a long list it is not: every extra pixel of\n  row height is a row that fell off the screen, and comparison is the thing you\n  are spending it on.\n\n## The relationship to density\n\nSpacing and density pull in opposite directions and both are correct in\ndifferent places. Generous space between a *few* important things aids focus.\nThe same space between *many* comparable things destroys comparison, because\ndistance is exactly what makes comparing expensive.\n\nSo the question is never \"is this page too tight or too loose\" — it is **what is\nthis screen for**. A record page can breathe. A queue of two hundred rows\ncannot.\n\n## The test\n\nSquint, or shrink the browser to 25%. You should see distinct clumps that match\nthe logical structure. If it is one even grey field, nothing is grouped; if it\nis scattered islands with no relationship, the levels are wrong.\n"}