Whitespace in design is often described as empty space. It is better understood as active space: the material that separates, groups and gives weight to everything else on the page.
Remove it and every element competes. Add it with intent and the page tells the reader where to look.
Space creates hierarchy#
The eye reads proximity as relationship. A caption close to its image belongs to it. A heading with more space above than below belongs to the section that follows. These relationships need no lines or boxes when the spacing is right.
A simple spacing scale#
- Pick a base unit, for example 4 or 8 pixels
- Build a short scale from it: 4, 8, 12, 20, 40, 60, 100
- Use small steps inside a component, large steps between sections
- Avoid values that are not on the scale
Space signals quality#
Premium brands use space generously because it reads as confidence. A product that is given room to breathe looks considered. A product crammed into a grid with five badges looks discounted, whatever its price.
Defending the space#
Every stakeholder has content they want visible immediately. The answer is not to refuse, but to show what happens when everything is emphasised: nothing is. A side-by-side of the dense and the spaced version usually ends the debate faster than an argument.
When everything is important, nothing stands out.
Space on small screens#
On a phone, whitespace feels expensive because the screen is small. But cramped mobile layouts are harder to tap and harder to scan. Reduce the large section gaps, keep the small ones, and let the page scroll. Scrolling is cheap. Confusion is not.
Start with the content#
The right amount of space depends on what it surrounds. A single strong image can hold a whole screen; a dense table needs tighter rhythm to stay readable. Decide what each section is for, give the most important thing the most room, and let everything else step back.
