White space

White space is the empty area around and between the elements of a design. It is the margin at the edge of a page, the gap between two sections, the room around a heading and the space between two lines of text. The name comes from print and it does not have to be white.

In short

• It is any area with nothing in it, whatever the colour behind it.
• It is what makes a page readable rather than merely full.
• Proximity carries meaning, so gaps do the grouping.
• The instinct to fill it is what makes most pages hard to read.

Two kinds, and only one gets attention

White space comes in two sizes and they do different jobs.

• Macro. The large areas. Margins at the edges, the space between sections, the gap between a column of text and the image beside it. This is what sets the rhythm of a page and tells a reader where one idea ends.
• Micro. The small ones. The space between lines, between letters, around the label inside a button, between an image and its caption. This is what decides whether text is comfortable to read.

Macro white space is the part people argue about, because it is visible in a mockup and looks like room going spare. Micro white space is where most pages are actually failing, and it is almost never discussed, because a paragraph with line spacing set too tight does not look broken. It just quietly gets abandoned half way through.

Empty is not wasted

The instinct to fill a screen is understandable and it comes from thinking of a page as an area to cover. A design is closer to a sequence: this first, then this, then this.

Space is the main tool for creating that sequence. An element with room around it is read as important. A group of elements sitting close together is read as belonging to each other. Nothing has to be labelled, and no visitor has to think about it, because the reading happens before conscious attention arrives.

Take the space away and the ordering goes with it. Everything on the page becomes equally loud, which is the same as nothing being emphasised, and the visitor is left doing the work the design was supposed to do. That is what a crowded page costs. Not beauty, which is a matter of taste, but visual hierarchy, which is a matter of whether the page functions.

What proximity is saying

The strongest rule in this area is also the easiest to check. Things that are close together are understood as related, and things that are far apart are understood as separate. This happens whether or not it was intended.

So the useful question about any page is not how much space there is but whether the gaps agree with the meaning. A price sitting exactly as far from its product as from the next product is ambiguous. A caption equidistant from its own image and from the paragraph below it belongs to neither. A form label floating between two fields is genuinely unclear about which one it names.

These are not aesthetic complaints. They are the reader being given contradictory instructions, and the usual result is a small hesitation that nobody reports and everybody feels.

Where it disappears

White space rarely leaves a design in one decision. It gets eaten gradually, and almost always in the same four places.

• Above the fold. Somebody wants more visible without scrolling, so the top of the page is compressed until the headline has no room to be a headline.
• Line spacing. Reduced to fit a paragraph into a space it was not designed for, which makes the whole block harder to read to save one line.
• Around buttons. Padding trimmed until the target is small and the label is touching its own edge, which is worst on a phone where the target is a thumb.
• Between sections. Gaps closed to shorten the page, removing the boundaries that told a reader one subject had finished.

The pattern behind all four is the same. Each individual reduction seems minor and nobody can point at the moment the page stopped working, but the finished version reads as cramped in a way that is hard to name and easy to feel.

What changes on a phone

Most visitors to a Philippine business website arrive on a phone, and spacing behaves differently there in ways that are easy to miss when a design is approved on a laptop.

The screen is narrower, so a line of text reaches its edge much sooner and the gaps that separated columns on a desktop collapse into vertical distance instead. Everything becomes one long column, and the only thing left distinguishing one section from another is the space between them. Compress that to shorten the page and the whole thing reads as a single undifferentiated block.

Touch changes the second half of it. A cursor is a point and a thumb is not, so padding around anything tappable stops being decoration and becomes the target itself. Buttons sitting too close together produce mistaken taps, and a mistaken tap on a checkout or a contact form is a visitor who leaves annoyed.

The practical version of this is to judge spacing on the device most people will use, not on the one the design was made on. A layout that looks generous in a desktop mockup and cramped on a phone has been reviewed in the wrong place.

Words you will hear

• Negative space. Another name for white space, and a more accurate one.
• Padding. The space inside an element, between its edge and its contents.
• Margin. The space outside an element, between it and its neighbours.
• Leading. The space between lines of text, pronounced to rhyme with bedding.
• Measure. The width of a column of text, which decides how far the eye travels before it finds the next line.

White space is the cheapest improvement available to most business websites, because it requires no new photography, no new copy and no new features. It only requires resisting the request to fill it, which is harder than it sounds and does more for user experience than the next redesign will.