The gap is doing the grouping

A lesson from UI and UX for Engineers: Decisions You Made By Accident. Play it above, or read it through below.

• A spacing scale constrains the numbers and makes none of the decisions.

  The common read: Every value on this page comes off the spacing scale, so the spacing is consistent and the grouping is doing its job.

  A spacing scale constrains the numbers and makes none of the decisions. It removes a real defect, the page assembled from 7, 11, 18 and 23 pixels, and it removes it by deleting choices rather than by ranking them. The article that named the eight-point grid argues exactly that: removing seven of every eight spacing options reduces the fiddling available to you. It cites no research, and it does not claim to.

  The primary source underneath the convention is Material, and it specifies two grids rather than one. Components align to an 8dp square baseline grid; iconography in toolbars aligns to a 4dp grid; type aligns to a 4dp baseline grid. A system that says everything is on the 8-point grid is describing something Material never said, and the 4dp cases are exactly the places where a fine adjustment is needed.

  Six things the grid does not do, and each one is a decision it leaves you: it does not tell you which multiple; it does not produce hierarchy, since equal increments everywhere are a grid rather than a structure; it does not survive user font scaling if the values are pixels; it does not solve optical alignment; it does not settle density across breakpoints, where one gutter is generous on a phone and mean on a 27-inch display; and it quietly runs two grids at once.

  That arrives as a lint rule, added after a design-system audit, that fails any spacing value not divisible by eight, then a settings page that passes it and groups nothing, then a review comment asking for a divider line to make the sections clearer. The divider is the tell. Reach for the gap first: if a border is being added to say what belongs together, the spacing already failed to say it, and adding the border hides the failure instead of fixing it.

• One combination has been measured, and it is not yours.

  The common read: The Gestalt principles are perceptual laws, so when several of them point the same way the grouping is guaranteed.

  Exactly one combination of grouping factors has ever been measured, and it is not the one in your table. Proximity and similarity were found to combine additively in dot-lattice psychophysics, because their indifference curves are parallel in log-odds space. That is one pair, in one paradigm, with dots. No general rule for what happens when factors oppose each other has been established anywhere.

  The field says as much about itself. Its centennial review records that Gestalt psychology was severely criticised for offering mere demonstrations, using either very simple or confounded stimuli, formulating laws with little precision, and adding new laws for every factor shown to have an influence. A century in, the same review's second part still frames the central question as open.

  Proximity is the one factor that got quantified, and it is worth knowing why. From 1995 onward the dot-lattice programme produced a fitted attraction function whose exponent is a per-observer sensitivity measure, and a result called the Pure Distance law: grouping by proximity depends only on the relative distance between competing organisations, not on the overall configuration.

  Two more corrections the design lists drop. Past experience is one of Wertheimer's own named factors, and the centennial review lists the belief that these principles are innate in a table of common misunderstandings. That arrives as a design review where two competent people cite incompatible principles at each other, both are right about their own, and the argument is settled by seniority. Settle it with a session instead, because the literature has not settled it for you.

• The two gaps are one decision, and nobody wrote it down.

  The common read: A card's padding and the gap between cards are two independent spacing decisions, so setting both from the scale is enough.

  Padding and gap are one decision written in two places, and the only thing that matters about them is which is larger. Proximity is a comparison, so an element belongs to whatever it is nearest to; a card whose internal gap exceeds its external gap is telling the eye that its contents belong to the next card. The rule is one line and it is the highest-value line in this lesson: whenever spacing connects a group, there must be more space around the group than within it.

  Now the honest part, and it is the reason this beat exists rather than a bullet in a style guide. That inequality has never been measured in an interface. The source pack searched for it and found the perceptual law underneath it, a century old and quantified, and found no study of the inequality itself. It also found that no design system states it: one major system's spacing documentation states the proximity principle, separates inside-component tokens from layout tokens, and never says which should be larger.

  So it is craft applying a measured law, which is the strongest kind of craft and is still craft. Take it as a rule, because the mechanism is real and the failure mode is visible the moment you look for it. Do not take a number with it. There is no published ratio, and any specific one you have seen was somebody's taste.

  That arrives as a review comment reading "can we get a divider between these", on a card grid whose padding is larger than its gutter, resolved by adding a one-pixel line, which works, because a border is a second grouping factor pushed in to overrule the first. Fix the inequality and delete the divider. The line was never decoration; it was compensation.

• The criterion asks you to survive the spacing, not to ship it.

  The common read: SC 1.4.12 Text Spacing means my content has to be set at line-height 1.5, letter-spacing 0.12em and the rest of the list.

  What does a text-spacing criterion require of a layout that already looks generous? Not the values. SC 1.4.12 Text Spacing, Level AA, lists four settings, and the requirement is that no loss of content or functionality occurs when a USER applies them. The Understanding document says it in one sentence: this criterion does not dictate that authors must set all their content to the specified metrics, or provide a mechanism to do so.

  The four values are a line height of at least 1.5 times the font size, spacing after paragraphs of at least 2 times, letter spacing of at least 0.12 times, and word spacing of at least 0.16 times. What you have to survive is those, applied by somebody else, without three named failures: text clipped vertically, text clipped horizontally, or text overlapping other content. The values are a floor and the same document encourages exceeding them.

  That reframes the work. It is not a typography task, it is a containment task, and the things that fail it are fixed-height pills, single-line buttons with hard heights, truncated table headers and any component whose vertical size was derived from a font size rather than from its content. A layout can be airy and still fail, and an unfashionably tight one can pass.

  That arrives as an audit finding on a navigation bar, three months after a redesign that made everything roomier specifically to satisfy this criterion, because the nav labels live in pills with a fixed height and clip the moment a user stylesheet raises the line height. Test it the way it is written: apply the four values from a user stylesheet and look for clipping, and stop treating the numbers as a design brief.

• The padding you asked for has never been the padding on screen.

  The common read: Padding of 12 pixels puts 12 pixels of space above and below the text in a button.

  How much space is above the text in a button with padding: 12px? Not twelve pixels, and it never has been. A line box distributes its leading evenly above and below the glyphs, so the optical space is the padding plus half of whatever the line height exceeds the text's own content area by, and that surplus differs per font. Every vertical padding value in every component library carries a hand-tuned offset that somebody added without being able to say why.

  The web now has a property that says what you meant. text-box-trim specifies which of the over and under edges to trim from a text element's block container, with text-box-edge deciding how much, and the shorthand a component author reaches for is text-box: trim-both cap alphabetic. It reached Baseline newly available in August 2026, which makes it the newest thing in this lesson by a wide margin.

  Two neighbours are worth knowing about and are not usable as load-bearing layout. hanging-punctuation implements the typographic tradition of pulling a quote mark outside the measure, and it ships in Safari only, at partial support, and can trigger overflow when the container has no padding. The reason to hang punctuation comes entirely from tradition; the specification supplies the mechanism and no readability rationale at all.

  That arrives as a two-pixel argument between a designer and a developer that neither can localise, in a component that looks bottom-heavy in one weight and fine in another, closed by a magic number in a constant file with the comment "optical". Name the offset for what it is until the property is safe to depend on, and when you do adopt it, adopt it in the component rather than at the call site, because the whole point is that the value at the call site finally means something.