In short
Whitespace, or negative space, is the unmarked area around and between elements: margins, padding, line spacing, the gaps between paragraphs, columns and sections. It is not wasted space; it groups related things, separates unrelated ones, gives text room to be read, and directs attention to what matters. Studies have found generous spacing improves comprehension and perceived quality. Use it deliberately through a spacing scale, and defend it when someone asks to fill it, because a page with everything on it says nothing in particular.
What it is
Whitespace is every part of a layout that has nothing in it: the margin around the page, the padding inside a card, the gap between two paragraphs, the space between a heading and its text, the air around a button. It need not be white; on a dark interface it is dark, on a photograph it is the calm part of the image. The older term, negative space, makes the point better: it is defined by what surrounds it.
Designers talk about it constantly because it is where layout actually happens. Elements do not organise themselves; the space between them does the organising.
What it does
Grouping. Things close together read as related; things farther apart read as separate. This is the Gestalt principle of proximity, and it is the reason a label sits nearer its field than the field above it, and why a page's sections are separated by more space than the paragraphs within them. Get the spacing wrong and a caption attaches to the wrong image.
Hierarchy. Space around an element makes it important. A heading with room above it reads as the start of something; a button with air around it reads as the action. Crowded elements compete; isolated ones command.
Legibility. Line height, the space between lines, is whitespace, and it is the single largest factor in whether body text is comfortable to read. So is line length, which is set by the margins. Text with too little of either is skimmed, not read.
Focus. A page with one thing surrounded by space says: this. A page with forty things says: whatever you like. The landing pages that convert best are usually the ones with the fewest elements and the most room around them.
Perceived quality. Generous spacing reads as confident and considered; cramped spacing reads as cheap. Luxury brands and premium products use space extravagantly for exactly this reason.
Macro and micro
Macro whitespace is the large-scale structure: margins, the space between sections, the gutters between columns, the empty area around a hero. It sets the page's rhythm and its overall feel.
Micro whitespace is the small-scale detail: line height, letter spacing, the padding inside buttons and inputs, the gap between an icon and its label, the space between list items. It sets whether individual elements are comfortable and whether they are perceived as belonging together.
Most pages that feel wrong have a micro problem: inconsistent gaps that make similar things look different. A spacing scale, a small set of fixed values used everywhere, fixes that more reliably than taste.
What the research says
Studies of text layout have found that increased margins and line spacing improve comprehension and reading speed for most readers, with particular benefit for readers with dyslexia. Eye-tracking research on web pages shows attention concentrating on isolated elements and dispersing across crowded ones. And measurements of perceived quality consistently favour layouts with more space, up to a point where the content becomes hard to find.
The point exists. Whitespace is not unlimited good; a page where every element is a screen apart forces scrolling and hides relationships. The goal is proportion, not maximum.
The arguments against it, and the answers
"It looks empty." It looks calm. Empty is when there is nothing to say; calm is when what is said has room. Show a comparison with the same content crowded, and the reaction usually reverses.
"We are wasting the space above the fold." Above the fold is where the most important thing goes, and it is most important when it is not competing with five other things. Space is what makes it the most important thing.
"Users have to scroll more." Users scroll without complaint; what they do not do is read a wall. Scrolling past clear sections beats squinting at dense ones.
"Fill it with something useful." The something is rarely useful to the visitor; it is useful to a stakeholder who wanted their item on the page. Every addition dilutes the item that was there.
Practical rules
- Use a scale. A fixed set of spacing values, applied consistently, so that related things are always the same distance apart.
- Space between sections is larger than space within them. The ratio is what communicates structure.
- Set body text at 1.5 to 1.6 line height and 55 to 75 characters per line. Both are whitespace decisions and both are where most sites lose readability.
- Give the primary action room. More space around the main button than around anything else.
- Group with proximity before boxes and lines. If the spacing is right, most borders are unnecessary.
- Check on mobile. Space that is generous on desktop can be excessive on a phone; scales should step down at small widths.
- When in doubt, remove an element rather than the space around it.
Whitespace is the cheapest design tool there is and the most frequently argued about. If you would like help making the case for it on a specific page, with a before-and-after, book a call.
Common questions
Why is whitespace important in web design?
It groups related elements, separates unrelated ones, directs attention to what matters, and gives text the line height and margins that make it readable. Research links generous spacing to better comprehension and higher perceived quality. Without it, a page becomes a competition between elements that no single one wins.
What is the difference between macro and micro whitespace?
Macro whitespace is the large-scale spacing: page margins, gaps between sections, column gutters, room around a hero. Micro whitespace is the fine detail: line height, letter spacing, padding in buttons and inputs, gaps between icons and labels. Macro sets the page's rhythm; micro decides whether elements feel comfortable and related.
Can a website have too much whitespace?
Yes. When elements are so far apart that their relationships are lost, when essential content is pushed far below the fold, or when a phone screen shows one line per scroll. The aim is proportion: more space between sections than within them, enough around the important things, and a scale that steps down on small screens.
How do I convince a client not to fill whitespace?
Show the same content both ways side by side and ask which they would rather read. Explain that space is what makes the important element important, that visitors scroll readily but do not read walls, and that each added element dilutes the one that was there. Offer to remove an element rather than the space.
What is a good line height for body text?
Between 1.5 and 1.6 times the font size for most body text on screens, with a line length of roughly 55 to 75 characters. Headings use tighter line height, around 1.1 to 1.3. These two whitespace settings have more effect on readability than the choice of typeface.
