A short spacing scale cuts decisions and drift
Aliases: spacing scale · 4px grid · spacing steps
What it is
Collapse padding and gap onto a short legal list — say 4, 8, 12, 16, 24, 32, 48 — and both the decision count and the 13 / 14 / 15 zoo drop. The list has to be short because 13 and 14 are not a visible difference, yet they become two numbers the implementation must keep in register.
Open a layout inspector and find a dozen distinct paddings between 8 and 24: the product was assembled from different kits. The claim is set size. It is silent on whether 4 or 8 is the base, and silent on rare optical exceptions.
Why it happens
Spacing differences have a threshold. A few pixels often sit below a just-noticeable difference, so the extra “precision” buys no visible effect and only a later matching bill. Each extra legal value is another choice; with several authors, choices diverge. A finite scale rewrites the question from “how many pixels” to “tight, regular, or loose,” and those three names can be shared across components.
Too few steps hurts as well: only 8 and 32, and in-group versus between-group has no middle, so everything collapses to 8 and structure turns to mush again. Finite means a short list that is enough, not a race to one number.
Where it stops holding
Illustration, data graphics, and glyphs that need optical tweak will land off-scale; those values should be named, justified, and kept out of the daily menu. Transient spacing during motion need not snap. Print and physical packaging are not this screen scale.
New densities or dynamic type will drift how loose a step looks. Keep the semantics (tight / loose) stable. Pixels may grow with type; that is not a license to sneak a ninth and tenth everyday option.
Applying it
- Publish a short list and one-line use for each step (control padding, in-group, between-group, between-blocks). Expose only those options in the design tool.
- In code, map raw pixels to named steps. In review, treat “one more number” as something to explain, not a taste call.
- How to check: dump every padding / gap / margin on a screen and count distinct values in the 8–32 band. More than about six: list each off-scale number and ask whether it has its own meaning. If not, snap it to the nearest step and confirm groups on that screen still separate.