Whitespace

011 min

The problem whitespace solves

In November 2011, Gmail changed the look of its inbox. The old design fit a large number of messages into a small area, one tight row after another. The new design moved the rows farther apart on large monitors, so each message had more empty space above and below it. Jason Cornwell, a designer on the Gmail team, gave the reason on the official Gmail blog. Many people find a page easier to read when lines and elements have more room between them.

Not everyone agreed. Some people wanted the old rows back, because they wanted to see as many messages as possible without scrolling. Google answered by adding a density setting with three choices: Comfortable, Cozy and Compact.

That disagreement is about whitespace. The empty space on a page is not what is left over after the content is placed. It is a design decision, and it has a cost and a benefit. More space makes each item easier to see and to read. Less space shows more items at once. Every layout picks a point between the two, and the right point depends on who is reading and what they are trying to do.

To pick that point well, a designer needs to know what empty space actually does to the eye.

023 min

How whitespace works on the eye

Whitespace works because people read empty space as information. A wide gap between two things tells the eye that they are separate. A small gap tells the eye that they belong together. This is the Gestalt principle of proximity: items placed near each other look like one group, and items far apart look like different groups. In the Gmail inbox, the space between rows is what makes each row read as one message.

Designers usually split whitespace into two scales.

• Micro whitespace is the small space inside text and small parts: between letters, between words, between lines, and between a label and its field. The space between lines of text has its own name, leading.
• Macro whitespace is the large space between big parts: page margins, the gaps between sections, and the space around an image or a column.

A second split is about intent. Passive whitespace is the even spacing that keeps a layout comfortable to read. Active whitespace is space added on purpose to send the eye to one thing. A button with a wide empty area around it is noticed before a button packed between other links. The empty area separates it from its neighbours without adding a line or a box.

Space also sets the order in which people look. A heading with more space above it than below it reads as the start of a new section, and it attaches to the paragraph under it. Size, colour and weight do most of the work of visual hierarchy, but space decides where one group ends and the next begins. A page with no spacing system looks cluttered even when every item on it is useful. The reader has to work out the groups alone, and that adds to the cognitive load of reading.

Why letters need space: crowding

The smallest scale is the space between letters, and the reason for it lies in human vision. When objects sit too close together, the brain mixes up their parts and cannot identify any of them. Vision scientists call this crowding. In 2008, Denis Pelli and Katharine Tillman reviewed the research on crowding in letters, faces and visual search. They concluded that recognition is usually limited by the spacing between objects rather than by their size.

The amount of space a letter needs is not fixed. Close to the point you are looking at, letters can sit tight and still be read. Farther to the side, the same letters run together. Their review traces this rule to an older observation. In 1970, Herman Bouma reported that a small letter needs a gap roughly half its distance from the point you look at. So the space between letters decides how many letters a reader can take in with each look, and that limits reading speed.

032 min

Where the idea of whitespace comes from

Whitespace has no single inventor. It is practitioner convention, built up over centuries of printing and drawing, and no one experiment established it. The name comes from print. Printers used white paper, so any part of a page with no ink on it stayed white. The idea does not depend on the colour: a dark background, a flat colour, a photo or a quiet pattern can do the same job.

Art schools teach the same idea as positive and negative space. The subject of a picture is the positive space, and the area around it is the negative space. Sometimes the negative space forms a shape of its own. In Rubin's vase, the space around a vase forms two faces in profile, a well-known case of figure-ground reversal. The FedEx logo has an arrow in the gap between the E and the x. Japanese design has its own word, ma, for a deliberate interval or pause.

The opposite habit also has a name. Horror vacui, Latin for "fear of empty space", describes art and layouts that fill every part of the surface. Some newspaper and directory advertising leans that way, to fit as much information as possible into the space that was paid for.

Web designers took the print vocabulary with them. In 2007 the designer Mark Boulton wrote an essay in A List Apart that explained macro and micro whitespace, and active and passive whitespace, for people building websites.

042 min

What research says about whitespace and reading

Most whitespace advice is convention, but some of its effects have been measured. The measurements are smaller and more mixed than design guides suggest.

What changes reading and what changes preference

In 2004, Barbara Chaparro and colleagues at Wichita State University's Software Usability Research Lab gave people the same online text in four layouts. They changed two things: whether the text had margins around it, and how much space sat between the lines. Margins changed both reading speed and comprehension, while extra line spacing changed only which version people preferred. Readers were also more satisfied with the text that had margins.

That split matters for a design team. A layout can feel better without making reading faster, and a team should not claim more than the data shows. Preference is still a real result, because people return to pages that are comfortable to read.

Letter spacing and readers with dyslexia

The strongest evidence comes from readers who are most affected by crowding. Children with dyslexia are thought to suffer more from crowding than other readers of the same age. In 2012, Marco Zorzi and colleagues tested 74 children with dyslexia in Italy and France. Each child read printed text with normal letter spacing and again with 2.5 points of extra space between letters.

A second experiment used 20 Italian children and two texts matched for length and difficulty. On matched texts, the children made 6 errors with spaced letters against 11.8 with normal spacing. They also read faster with the extra space, and they needed no training to get the benefit. Two other researchers, Skottun and Skoyles, later questioned the size of the gain in a published letter. How much it helps in daily reading is still debated.

The 20% figure

Many whitespace guides say that good spacing raises comprehension by about 20%. The number is repeated without a method you can check. One agency blog credits it to a study by Dmitry Fadeyev. Other guides credit the same number to other people. The pages that repeat it do not describe who took part, what they read, or how comprehension was measured. Until that study is found and read, treat the number as unverified.

052 min

How whitespace shows up in real products

Evidence like this explains why teams keep adding space, and also why some users push back. The best real cases do not choose one side. They decide where space helps and where density helps.

The lesson is that micro whitespace can be added where macro whitespace cannot. A dense product does not have to choose between clarity and content.

Space as a price signal

Whitespace also tells people what kind of product they are looking at. Cosmetics and other luxury brands use wide empty areas in their marketing. Boulton described a direct-mail client who refused extra space, and Boulton agreed with him. Direct mail has to look low-cost to sell, and generous space would have made the package look expensive. Boulton summed it up: less whitespace looks cheap, and more whitespace looks like luxury. Before adding space, a team should ask which of those two messages its customers expect.

062 min

Where whitespace goes wrong

Space that separates two items can also hide one of them. The failures are easy to miss in a design review, because the page still looks clean.

Signs that a layout has too much space, or space in the wrong place:

• Important content sits below the first screen with nothing showing that more content follows.
• A control sits far from the fields or items it acts on.
• Session recordings show people stopping at a wide gap.
• Expert users ask for a compact view.

072 min

Whitespace and accessibility

For some readers, spacing is not a matter of taste. People with low vision may need more space between lines, words and letters before they can read at all. People with dyslexia may add space to read faster, which fits the crowding research above. WCAG 2.2 Success Criterion 1.4.12 Text Spacing (Level AA) protects that need. It does not set the spacing a page must ship with. It says a page must keep working when the reader changes the spacing with their own tools. Under it, a reader must be able to set line height to 1.5 times the font size without losing content.

Where fixed layouts break

Tight designs often fail this test. A heading inside a box with a fixed height gets cut off when the reader adds line spacing. Headings placed side by side lose their last letters, and one line of text runs over the next. The W3C lists clipped or overlapping text as a failure of this criterion. The fix is a layout that grows with its text: boxes without fixed heights, and text containers that let lines wrap.

Space around controls helps motor access too. Empty space around a small button lowers the chance of tapping its neighbour by mistake on a touch screen.

081 min

Whitespace vs. nearby concepts

Several terms sit close to whitespace. What separates them is what each one controls.

The pair people mix up most is whitespace and minimalism. Minimalism removes elements. Whitespace arranges the space between the elements that remain. The Economist redesign added whitespace without cutting any content, so it was not a move toward minimalism.

092 min

Applying whitespace to a layout

The Gmail case gives the order of work: decide who reads the page and what they need to compare, and only then set the spacing.

1. 1

   Group with space before you group with lines.

   Put related items close together and leave a larger gap between groups. Remove a divider line and check whether the groups still read. If they do, the line was not needed.

2. 2

   Use a spacing scale.

   Pick a small set of values, such as 4, 8, 16, 24 and 48 pixels, and use only those. Consistent gaps let readers learn what each size of gap means.

3. 3

   Put more space above a heading than below it

   , so the heading attaches to its own section.

4. 4

   Give the main action active whitespace.

   Leave a clear empty area around the one button that matters most on the screen.

5. 5

   Keep a cue to scroll.

   On a long page, let part of the next section show above the bottom of the screen. Then a wide gap does not look like the end.

6. 6

   Test with the text spacing values.

   Apply the WCAG 1.4.12 values and check that no text is cut off or overlapping.

7. 7

   Offer density when users disagree.

   If experts need to compare many rows, give them a compact mode, as Gmail did.

Adding whitespace backfires in three cases: it breaks a group that should hold together, it pushes key content below the first screen, or it makes a product look like something it is not. Before adding a gap, ask what it tells the reader. If a gap tells the reader nothing, remove it.

?4 questions

Questions people ask

§11 sources

Sources