Eight numbers, used everywhere
The value of a spacing scale is not the numbers — it is that there are only eight of them.
Eight numbers, used everywhere
The value of a spacing scale is not the numbers — it is that there are only eight of them, and every gap in the layout picks one.
The constraint is the feature
It is worth being blunt about why a spacing scale helps, because the numbers themselves are not special. Any sensible progression works. What the scale does is remove a decision: when the options are eight values rather than every integer, "how much space goes here" stops being a judgement made afresh every time and becomes a choice between two adjacent steps.
The result is consistency that nobody has to police. Two people working on different screens reach for the same gaps without agreeing anything, because there was nothing else to reach for. That is worth more than any particular ratio, and it is why widening a scale to cover an awkward case tends to make things worse — each value you add is another decision handed back.
When to ignore it
Optical spacing and mathematical spacing are not the same thing, and where they disagree the eye wins. Text has space built into it already — line-height above and below, and side bearings on every glyph — so a heading with 24px of margin has visibly more than 24px of gap beneath it. Icons, punctuation and anything with an irregular silhouette sit optically off-centre when centred mathematically.
So the scale governs layout, and fine adjustment against a shape is a separate business. The distinction worth keeping is that a value off the scale should be a deliberate, local correction with a reason attached — not a new step, and not something that quietly spreads by being copied.
Which progression, and when
Linear keeps every value a multiple of the base, which makes arithmetic in a layout trivial: two of step 2 is step 4. It gets coarse at the top — the difference between 28 and 32 is not useful.
Geometric gives fine control at small sizes and large jumps at the top, which is usually what a layout needs. The values stop being tidy multiples, which is the cost.
Fibonacci sits between them and is popular mostly because the numbers feel considered. There is no evidence it works better than a geometric scale with a similar ratio.
Fewer steps than you think
Most systems ship twelve and use six. Every extra step is a decision someone has to make on every component, and the choice between 20 and 24 pixels is rarely one worth making.
The scale fails at the first exception
The moment somebody writes margin: 13px, the rhythm is gone and the scale is decoration. If a value is genuinely needed and not on the scale, the scale is wrong — change it rather than working around it.