II · Relationship

The Gap Is Saying Something

Equal spacing says equal rank, whether you meant it or not

Of the three tools print relies on, space is the one nobody decides. Here's a thing I watch happen in layout reviews, including my own.

Three elements on a page: a navigation bar, a page title, a card of content. Each gets a comfortable margin. It looks clean. And then something is off that nobody can name. The title seems slightly misaligned. Someone says center it. Someone else nudges it four pixels. It gets a little better and still isn't right.

The problem isn't alignment. The equal margins have told the eye a story the content doesn't agree with: three siblings, all at the same level. But the title isn't the navigation bar's peer. It's the card's heading; conceptually they're one thing. Spatially the gaps have made the title a loner, hovering at equal distance from two things. Move it close to its card, let the pair align as a group, and the misalignment resolves on its own. It was never an alignment problem. It was a grouping problem wearing an alignment costume.

<figure style="margin:1.6rem 0;text-align:center"><svg width="400" height="252" viewBox="0 0 400 252" role="img" aria-label="a nav bar, a title and a card, first with equal gaps and a flat tree of three siblings, then with the title close to its card and a tree where the title belongs to the card"><rect x="8" y="8" width="180" height="150" rx="6" fill="none" stroke="#d8d2c8" stroke-width="1"/><rect x="18" y="18" width="160" height="14" rx="3" fill="#eeeae3"/><rect x="20" y="58" width="70" height="9" rx="4.5" fill="#c9c2b6"/><rect x="18" y="90" width="160" height="44" rx="5" fill="none" stroke="#d8d2c8" stroke-width="1"/><rect x="28" y="102" width="100" height="5" rx="2.5" fill="#e0dad0"/><rect x="28" y="114" width="76" height="5" rx="2.5" fill="#e0dad0"/><circle cx="98" cy="186" r="3" fill="#8f887d"/><line x1="98" y1="186" x2="48" y2="208" stroke="#8f887d" stroke-width="1"/><circle cx="48" cy="208" r="3" fill="#8f887d"/><text x="48" y="222" font-family="Inter, system-ui, sans-serif" font-size="8" font-weight="400" fill="#8f887d" text-anchor="middle">nav</text><line x1="98" y1="186" x2="98" y2="208" stroke="#8f887d" stroke-width="1"/><circle cx="98" cy="208" r="3" fill="#8f887d"/><text x="98" y="222" font-family="Inter, system-ui, sans-serif" font-size="8" font-weight="400" fill="#8f887d" text-anchor="middle">title</text><line x1="98" y1="186" x2="148" y2="208" stroke="#8f887d" stroke-width="1"/><circle cx="148" cy="208" r="3" fill="#8f887d"/><text x="148" y="222" font-family="Inter, system-ui, sans-serif" font-size="8" font-weight="400" fill="#8f887d" text-anchor="middle">card</text><rect x="212" y="8" width="180" height="150" rx="6" fill="none" stroke="#d8d2c8" stroke-width="1"/><rect x="222" y="18" width="160" height="14" rx="3" fill="#eeeae3"/><rect x="224" y="72" width="70" height="9" rx="4.5" fill="#c9c2b6"/><rect x="222" y="90" width="160" height="44" rx="5" fill="none" stroke="#d8d2c8" stroke-width="1"/><rect x="232" y="102" width="100" height="5" rx="2.5" fill="#e0dad0"/><rect x="232" y="114" width="76" height="5" rx="2.5" fill="#e0dad0"/><circle cx="302" cy="186" r="3" fill="#8f887d"/><line x1="302" y1="186" x2="262" y2="208" stroke="#8f887d" stroke-width="1"/><circle cx="262" cy="208" r="3" fill="#8f887d"/><text x="262" y="222" font-family="Inter, system-ui, sans-serif" font-size="8" font-weight="400" fill="#8f887d" text-anchor="middle">nav</text><line x1="302" y1="186" x2="342" y2="208" stroke="#8f887d" stroke-width="1"/><circle cx="342" cy="208" r="3" fill="#8f887d"/><line x1="342" y1="208" x2="320" y2="230" stroke="#8f887d" stroke-width="1"/><circle cx="320" cy="230" r="3" fill="#8f887d"/><text x="320" y="244" font-family="Inter, system-ui, sans-serif" font-size="8" font-weight="400" fill="#8f887d" text-anchor="middle">title</text><line x1="342" y1="208" x2="364" y2="230" stroke="#8f887d" stroke-width="1"/><circle cx="364" cy="230" r="3" fill="#8f887d"/><text x="364" y="244" font-family="Inter, system-ui, sans-serif" font-size="8" font-weight="400" fill="#8f887d" text-anchor="middle">card</text><text x="98" y="172" font-family="Inter, system-ui, sans-serif" font-size="9" font-weight="400" fill="#8f887d" text-anchor="middle" font-style="italic">equal gaps</text><text x="302" y="172" font-family="Inter, system-ui, sans-serif" font-size="9" font-weight="400" fill="#8f887d" text-anchor="middle" font-style="italic">grouped gaps</text></svg><figcaption style="font-size:.8rem;color:#a8a298;font-style:italic;margin-top:.4rem">Equal gaps say three siblings. Move the title to its card and the eye draws a different tree.</figcaption></figure>

Two things close together read as related. Two things far apart read as separate. The eye does this to every gap on the screen, including the ones nobody decided. So the corollary that catches people: equal spacing says equal rank. If the gap between A and B is the same as the gap between B and C, you've said A, B and C are siblings, and anything that contradicts it feels like friction the person can't point at.

It matters most where the stakes are. Put Delete next to Save and Cancel, with the same weight and the same spacing, and you've told the person the three are the same kind of thing. Give Delete forever its own distance and its own treatment, and the danger reads before the word does. The distance isn't decorative. It's communicative.

Nobody designs a flat hierarchy on purpose. It accumulates. You place a thing, give it a margin that feels right, place the next thing, give it a margin that feels right. Each decision is local and comfortable, and the page ends up with every gap about the same size, which means every element about the same rank. Intuition optimizes for local comfort. Structure is a global property.

My own habit is to draw the hierarchy as a tree first, from what the page is for, and give myself three gaps: a large one between sections, a medium one between the elements inside a group, a small one inside a component, between a label and its field. The numbers matter less than the contrast between them; a gap that's ninety percent of the outer margin isn't an inner gap, it's the same gap with a rounding error. Then every gap gets assigned to one of the three, on purpose.

That's for pages that are read. Dense screens that people live in all day, a dispatch board, a print shop's order queue, often run on two gaps or on hairlines, because their content is a grid and grids group by alignment more than by space. There I'd rather have forty rows at one steady pitch than a beautifully tiered page that holds twelve.