Fix the spacing before the font

In one sentence

Inconsistent spacing is what makes an interface read as unfinished, and it is visible from across the room long before anyone notices which typeface you chose.

Why it matters

Ask someone why a screen looks amateur and they will usually reach for the font. It is almost never the font. It is that the gap above a heading is 19px in one place and 24px in another, that a card has 16px of padding on three sides and 12px on the fourth, and that two adjacent sections are separated by roughly — but not exactly — the same distance.

The eye is extremely good at detecting near-misses and very bad at articulating them. A viewer registers something is off and attributes it to whatever they have vocabulary for. Spacing is the largest source of that feeling and the cheapest to fix, because unlike type or color it requires no taste — only a rule you follow consistently.

Spacing also carries meaning. Proximity is the strongest grouping signal available, stronger than borders, backgrounds, or headings. When the gap between a label and its input is the same as the gap between one field and the next, the form stops reading as a set of pairs and starts reading as a list of unrelated things. No amount of visual polish recovers that.

How it works

Pick a base unit and derive everything from it. 4px is the usual choice; 8px is common but too coarse for dense interfaces, and you end up breaking it.

A scale that works for most products:

4  8  12  16  24  32  48  64  96

It is roughly geometric at the top and linear at the bottom, which matches how spacing is used: small values need fine gradations because they sit next to each other and get compared directly, large values do not.

Three rules make the scale do the work:

1. Every gap is a value on the scale. Not near it. On it. If a layout seems to need 20px, you have either an alignment problem or a component whose internal padding is wrong.
2. Space belongs to the container, not the sibling. Use gap and padding rather than margins on children. Margins collapse, stack unpredictably, and make a component's spacing depend on where it was dropped.
3. Distance encodes relationship. Related elements get one step, groups get two, sections get three or more. A reader should be able to infer the structure with the text blurred out.

In practice

Four places density reliably goes wrong:

Label-to-input versus field-to-field. The classic. If both are 16px, the form has no structure. Label to input should be one step (4 or 8); field to field two or three (16 or 24).

Headings. A heading belongs to the content below it, not the content above. Give it a large space above and a small space below — a 3:1 ratio is a safe default. Symmetric heading margins are the most common spacing bug in the wild.

Optical versus mathematical centering. Text sits inside a line box with leading distributed above and below, and most typefaces are not vertically centered within their em box. A button with equal top and bottom padding usually looks bottom-heavy. Trust the eye over the number and adjust by a step.

Nested containers. A card inside a section inside a page compounds padding fast. Decide which level owns the outer spacing and set the others to zero rather than letting each contribute a little.

Density is a product decision, not a global constant. A data table and a marketing page should not share a scale — but each should be internally consistent, and the switch between them should be a documented mode rather than an accident of who built the screen.

Common pitfalls

• Treating the scale as a suggestion. One 20px exception legitimises the next, and within a quarter you have thirteen distinct gap values and no rule.
• Spacing individual screens rather than components. Screens drift; components compose. Fix the padding once, at the component, and the screens follow.
• Reaching for borders and background fills to create separation that spacing should be doing. Extra lines are what a layout needs when the grouping is wrong.
• Ignoring the responsive case. A scale tuned at desktop widths usually needs its top end compressed on small screens; the bottom end should stay put.

Further reading

Refactoring UI is the most direct treatment of this specific problem. For the underlying perceptual argument, the Gestalt literature on proximity is worth reading once — it explains why spacing beats every other grouping mechanism you might reach for instead.