One spacing value everywhere groups nothing

A lesson from UI and UX for Engineers: Judging the Interfaces You Ship. 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 correct.

  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 the first version of Material Design, and it specified 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.

  The grid leaves six decisions to you. It does not choose which multiple goes where. It does not produce hierarchy: equal increments everywhere are a grid, not a structure. If the values are pixels, it does not survive a user's font-size change. It does not solve optical alignment. It does not settle density across breakpoints, where one gutter is wide on a phone and narrow on a 27-inch display. And it does not stay one grid: a system that claims one grid is usually running two.

  A common failure: a design-system audit adds a lint rule that fails any spacing value not divisible by eight, a settings page passes it and groups nothing, and a review comment asks for a divider line to make the sections clearer. The divider is a symptom of the spacing problem. Fix the gap first: if a border is being added to say what belongs together, the spacing has already failed to say it, and the border hides the failure instead of fixing it.

• A few pairs have been measured, and none of them in a table.

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

  A few pairs of grouping factors have been measured against each other, mostly in lab displays of dots or small patches. Proximity and similarity combined additively in dot lattices, and proximity and collinearity gave a similar result. Your table also sets proximity against similarity, but with stripes, borders and text, and no study gives numbers that transfer to it. No general rule for what happens when factors oppose each other has been established.

  The field has published this criticism of 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 after Gestalt psychology began, the same review's second part still frames the central question as open.

  Proximity is the one factor that has been quantified. 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.

  The design lists also omit two corrections. 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. A common failure: in a design review, two competent people cite incompatible principles, each is right about the principle they cite, and seniority decides the argument. Decide the argument with a usability session instead, because the literature does not answer it.

• Padding and gap are one decision, and no design system says which should be larger.

  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. The rule, and the most important line in this lesson: whenever spacing connects a group, there must be more space around the group than within it.

  In a grid with 24 pixels of padding and a 16-pixel gutter, each card's edge is 16 pixels from the next card's edge and 24 pixels from its own content. The eye pairs the two neighbouring edges across the gutter, instead of reading each edge together with the content inside the card, so the cards stop reading as separate groups.

  That inequality has never been measured in an interface. A search of the research literature found the perceptual law underneath it, a century old and quantified, and found no study of the inequality itself. The same search found that no design system states the inequality: 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 the rule is craft that applies a measured law. A measured law makes the rule stronger than most craft, and the rule is still craft. Follow it as a rule, because the mechanism is real and the failure is visible as soon as you look for it. Do not attach a number to it. There is no published ratio, and any specific one you have seen was somebody's taste.

  A common failure: a review comment asks "can we get a divider between these" on a card grid whose padding is larger than its gutter, and someone adds a one-pixel line. The line may look like a fix, because it adds a second grouping factor, but no published rule says a border beats proximity. Fix the inequality and delete the divider. The line was compensating for the spacing, not decorating the grid.

• SC 1.4.12 requires your layout to tolerate user spacing, not to use 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? It does not require the layout to use 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. Your layout has to accept those values, 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.

  Meeting the criterion is a containment task, not a typography task, and the components 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 spacious layout can fail, and a tight one can pass.

  A common failure: an audit flags a navigation bar three months after a redesign made everything roomier specifically to satisfy this criterion. The nav labels sit in fixed-height pills and clip as soon as a user stylesheet raises the line height. Test the criterion as 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 declare is not the space above the text 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? It is not twelve pixels. A line box distributes its leading evenly above and below the glyphs, so the space above the capital letters is the padding, plus half of the amount by which the line height exceeds the font's content area, plus the gap between the font's ascent and its cap height. Both extra amounts differ per font. Many component libraries compensate for this with unnamed, hand-tuned vertical padding offsets.

  CSS now has a property for this. 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 uses is text-box: trim-both cap alphabetic. It reached Baseline newly available in August 2026, which makes it the newest feature in this lesson.

  A neighbouring property is not yet safe to depend on for 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.

  A common failure: a designer and a developer argue about two pixels that neither can locate, in a component that looks bottom-heavy in one weight and fine in another, and the argument ends with a magic number commented "optical" in a constants file. Until every browser you support has the property, name that constant after what it compensates for: half-leading. When you adopt the property, apply it inside the component, so that the padding value at the call site is the space the reader sees.