White Space

Empty area was treated as waste for a long time. Screens are small and there is a lot to fit, so any gap attracts pressure to put something in it. Fitting more in at once means the user has to move less, which sounds reasonable enough.

Pagedeck once ran that reasoning on its document list. Row spacing came down to 8 pixels to fit twenty items on a screen, and the scrolling did disappear. Support messages went up. People said they could not find their own documents in the list, and some opened the wrong document and asked why the contents were different.

Opening the screen explained it. A row held a title, a last editor, and a date, and the gap between those three values was the same 8 pixels as the gap between rows. Nothing marked where one document ended. Users read one document's title on the same line as their own document's date.

Widening only the outer gap to 24 pixels made the messages stop. The same information was on the screen; only the way it read had changed.

People see things placed close together as one group. A boundary forms from distance alone, with no line drawn, which is the proximity part of Gestalt principles. White space uses that to build structure without boxes or rules, which is why a well-spaced screen can look like it has fewer parts than it does.

So what matters when picking values is not the size of a gap but the difference between gaps.

1. A difference is what creates a group. With 8 pixels between a heading and its body text and 32 pixels between that body and the next heading, the first two read as one block with nothing explaining it. Make every gap 16 pixels and ten lines look like ten lines. The absolute numbers could be 4 and 16 and the grouping would read the same.
2. Inside has to be tighter than outside. Invert that relationship and the grouping reads backwards. Padding of 24 pixels inside a card with 12 pixels between cards makes people see the touching edges of two neighbours as one unit.
3. Clearing the surroundings lifts an element. It is a way to emphasize something without touching size or color, which makes it a tool for building visual hierarchy, the arrangement that decides what gets seen first. Leave generous room above and below one checkout button and that button reads first on the screen.

There are two layers to work at: the narrow gaps between things that sit together, like a label and its icon, and the wide gaps between large blocks and the edge of the screen. Line height, the space between lines of text, follows the same principle. Around 1.5 times the font size reads comfortably in body text; set at 1.0 the lines blend and reading slows.

Values do not get chosen fresh per screen. A spacing scale fixes the usable gaps as a step table and everything gets picked from inside it. Multiples of four — 4, 8, 12, 16, 24, 32, 48 — are a common set. Naming each value and sharing it with code as a design token means engineers reach for the same numbers.

Lists and tables run into this most. Values inside one item go tight and items get separated. Once the ratio between those two gaps falls under about 1.5, where one row ends stops being clear and people read across the boundary.

Forms are the same. A label sits tight to its field and fields get separated from each other. When a label sits closer to the field below it, people read one item's description and fill in another. Names typed into phone-number fields usually come from this, and the fix is a gap rather than a longer label.

On touch screens, white space stops being about reading and becomes about pressing. Buttons four pixels apart get hit by mistake. The area a finger lands on is drawn larger than the visible control, and a button for a destructive action gets extra separation from its neighbour, since the cost of a wrong press is not symmetric.

On outward-facing screens it sets the impression. Generous space on a pricing or marketing page reads as an expensive product; dense packing reads as an information-rich one.

Narrow screens are where the judgment splits. White space is the first value anyone wants to cut, but what usually needs cutting on a small screen is the number of items, not the gaps. Keep the items and shrink only the spacing and the grouping disappears at small sizes, which is exactly where picking information out matters most. What folds and what gets dropped belongs to the layout rules instead.

"There's no difference in the gaps here, so it doesn't read as one block. Let's take the outer one to 24."

Make a difference between inside and outside rather than adjusting absolute values.

"That number isn't on the scale. Let's use 24 instead of 20."

Values outside the agreed step table are not used.

"On mobile the delete button is sitting too close to save."

The gap is tight enough to risk a wrong press.

At Pagedeck, Noa reviews mockups with the spacing table in hand. A 22 in a mockup becomes a 24 on the spot, not because 22 is bad but because every extra value invites a new one on the next screen.

Theo uses the same table from the code side. He reaches for token names rather than measuring pixels off a mockup, so changing a value in the table once moves the whole product with it. That table is also why spacing discussions do not turn into arguments about taste: people end up naming a step rather than defending a number.

The most common move is reading white space as waste and cutting it first to reduce scrolling. Less empty area does fit more on a screen, so the judgment is natural. What gets lost, though, is not empty area but grouping information. A list showing twenty items where no row is distinguishable takes longer to search than a list showing ten with clear separation. How many items are on screen and how many a user can find are different numbers, and only the second one is worth optimizing.

The other is reading more as better. Anyone who has fixed a cramped screen falls into it easily. But widening every gap together leaves the differences unchanged, so the structure reads the same and the page only gets longer. Widening pays off only when something gets tightened alongside. Contrast, which separates things by difference in brightness or size, and alignment, which shares a common edge, work the same way. All three do their job through difference, not amount.