Double the whitespace, then take some back

Your interface is tighter than it should be and you cannot tell. Neither can I, about mine. That is the actual problem this chapter solves, and it is worth being precise about why, because the usual justification for whitespace does not survive checking.

The two errors are not symmetrical

Too much space announces itself. You open the page, something looks adrift, and you know immediately. It is a visible, correctable error.

Too little space does not announce anything. It looks normal, particularly to the person who built it, who has been staring at it since it was three divs and has watched every element arrive. There is no moment where cramped looks wrong to its author.

Refactoring UI puts the asymmetry in one line: “It’s a lot more obvious when you need to remove white space than it is when you need to add it.”

That is the whole argument, and notice what kind of argument it is. It is not a claim that users comprehend better with more space. It is a claim about which of your own mistakes you are capable of detecting.

The move

Double every gap, look at it, then take back only what looks obviously wrong. The doubling is a search procedure, not a target.

You are not trying to arrive at twice the spacing. You are trying to arrive at a state where you can see the error, which only happens on the far side of correct. Overshoot, detect, retreat.

THE LOOP

 1  double every margin, padding and gap on the screen
 2  look at it. it will look wrong. that is the point
 3  take back only the gaps that look obviously too big
 4  stop

 you land above where you started and below where you
 overshot to, which is roughly where it should have been.

 the reason this works is not that more space is better.
 it is that step 2 is the only step in the whole process
 where you can perceive the error you started with.

Being honest about the evidence

Design writing treats whitespace as settled science. It is not, and you should know that before you repeat any of it in a meeting.

The most-cited experiment is a Wichita State lab report from 2004 with eighteen participants, not peer reviewed. It found that 10mm margins improved prose comprehension, F(1,17) = 8.34, p = .01, while also making reading slower, at p = .07, which is not significant. The widely circulated claim that whitespace improves comprehension by almost 20% is a documented misattribution of it.

More recent work does not rescue it. A CHI 2023 study found “no significant effect of Text Spacing on Reading Comprehension Scores, suggesting that although text spacings can affect Reading Goodput, it does not significantly affect comprehension.”

And the federal usability guidelines, which grade their own evidence, are not even on this chapter’s side. Their guideline 6:11 is titled Use Moderate White Space, and it reads “Limit the amount of white space” on pages used for scanning or reading. They rate it Relative Importance 3 of 5 and Strength of Evidence 4 of 5, which is stronger evidential backing than anything supporting the opposite advice.

Three further things I could not source at all, and am therefore telling you as opinion: that developers are calibrated on terminals rather than documents, that the right overshoot is specifically 1.5x or 2x, and that whitespace signals quality or premium positioning. All three are repeated constantly. None of them has a source I could find.

So this chapter is a procedure for correcting a perceptual blind spot in yourself. It is not a claim about your users, and if somebody challenges it in a design review, that is the ground to defend rather than the research.

What it costs

Space competes with density, and density is sometimes the product. A trading screen, an observability dashboard, an admin table used eight hours a day by someone who knows it well: these want more per screen, not less, and the person using them will thank you for the tighter version. The federal guideline is aimed squarely at this case and it is right.

And doubling everything uniformly is the wrong second step. The loop above says double then take back, and the taking back is not optional. Skip it and you ship an interface where nothing is grouped, because the space between related things has grown as much as the space between unrelated things. Which is the subject of the next move, and the thing that actually makes spacing mean something.

Try this week

Take one screen. In devtools, find your spacing values and double each one, uniformly and crudely. Do not be careful about it.

Look at it for ten seconds, then close it and reopen it, because the first look is the honest one.

Now take back only the gaps that look obviously wrong. Not the ones that feel unfamiliar, the ones that look broken. You will keep most of the increase, which tells you how far off you were.

Then screenshot the before and after side by side and show somebody who has not seen either. You are not asking which is better. You are asking which one looks like a product, and the answer will be quick.