White Space Is Not Wasted Space

What space actually does

It creates contrast, and contrast is what makes anything stand out.

A button surrounded by space is obviously a button. The same button in a row of six competing elements is one option among several.

Space also groups: things close together read as related, things separated read as distinct, and that grouping is understood before anything is read.

Which means space is doing structural work rather than sitting idle, and removing it removes the structure.

Why it gets filled

Because empty looks like an omission to anybody reviewing a design.

Somebody sees a gap and suggests putting the testimonial there, or the awards, or a second call to action.

Each addition is individually defensible, and the request is usually made by somebody who has never seen the page as a stranger.

It also happens because space feels like something you are not getting value from, particularly to anybody paying by the page.

The result is a page where every element has equal weight, which means none has any.

Where space matters most

• Around the main call to action, which is what it makes prominent.
• Between sections, so they read as distinct.
• Between lines of text, which affects reading speed considerably.
• In margins, so text is not against the screen edge on a phone.
• Around form fields, which reduces mistaps.

The third is the most under-used. Line spacing around one and a half times the text size makes a paragraph noticeably easier to read, and most sites set it tighter.

A worked example

A homepage where the first screen contained a heading, a subheading, three service boxes, a testimonial and a form, spaced tightly to fit.

Every element was there for a reason and the page produced very few enquiries.

They removed the testimonial and the form from that section, spaced what remained generously, and left the button with clear space around it.

The first screen now contained four things instead of seven.

Enquiries rose over the following months, and the form that had been removed from the first screen received more submissions from further down the page than it had at the top.

It had been competing with six other things and was now the obvious next step at the point where somebody had decided.

Margins on a phone

The most common spacing failure and the easiest to fix.

Text running to the edge of a phone screen is uncomfortable to read and looks cramped.

A margin of around sixteen to twenty pixels on each side is enough, and many themes set less or none.

It matters more on a phone than on a desktop, because the eye has less distance to reset and the edge of the screen is close to the text.

Worth checking on your own site by looking at a paragraph and seeing whether it touches the edge.

The counter-case

Where dense is correct.

A reference table, a price list, or a specification, where somebody is comparing values and scanning across rows. Space between rows helps and space around the whole thing does not.

An interface used repeatedly by the same person, where efficiency matters more than first impressions.

And a genuinely long page where excessive spacing means scrolling past nothing, which is its own irritation.

The judgement is whether somebody is scanning across to compare values, in which case density helps, or deciding what to look at next, in which case space does.

Space above and below headings

A specific case that carries more weight than its size suggests.

A heading should sit closer to the text beneath it than to the section above, because proximity signals what it belongs to.

Where the spacing is equal, a heading floats between two blocks and it is momentarily unclear which one it introduces.

That is a small confusion repeated at every heading down the page, and correcting it is one line of styling applied globally.

Line length

A related measure that affects readability as much as spacing.

Text running the full width of a large monitor produces lines of well over a hundred characters, which are difficult to track back from.

Around sixty to eighty characters is comfortable, which on a wide screen means constraining the text column rather than letting it fill.

Which produces space at the sides that looks empty and is in fact doing the entire work of making the text readable.

That is frequently the first space somebody suggests filling, and it is the space that should be defended most firmly.

Space between sections

The largest single lever on how a page reads, and the one most often set too small.

Sections need enough separation that the eye registers a break, otherwise a long page reads as one continuous block and nothing is scannable.

That usually means considerably more space than feels necessary while designing, because a designer is looking at the page zoomed out and a visitor is not.

A useful check is squinting at the page, or shrinking it until the text is unreadable. The sections should still be visible as distinct blocks.

If they blur into one, the spacing is insufficient regardless of how it looks at full size.

Alternating background colours achieves the same thing and is a heavier instrument, worth using sparingly rather than on every section.

Consistency

The thing that separates deliberate space from accident.

Spacing should come from a small set of values used repeatedly, rather than being adjusted individually until each section looks acceptable.

A page with sixteen different gap sizes reads as untidy even to somebody who cannot say why.

Four or five spacing sizes, applied consistently throughout, produce a page that looks considered rather than assembled.

Most modern themes work this way by default, and the consistency breaks the moment somebody adjusts a single section by hand.

What to try

1. Count the elements on your first screen.
2. Remove the two least important.
3. Increase the space around what remains.
4. Check line spacing is around one and a half.
5. Check text does not touch the screen edge on a phone.
6. Constrain text width on wide screens.

The second is the difficult one, because every element on the page has somebody who wants it there, and the only argument for removal is that the remaining ones will work better.

How much belongs on that first screen is covered in the fold argument and what replaced it.

Frequently asked questions

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.