Whitespace is not empty space

There is a familiar moment in many website projects. The layout is taking shape, there is a bit of breathing room around the main message, and someone says: "There's a gap there. Could we put something in it?" A testimonial, a badge, another button, a stock photo. Each addition feels like extra value. By the end, the page is full and somehow says less than it did before.

Whitespace (also called negative space) is the area between and around elements. It does not have to be white; it is any part of the layout deliberately left without content. The important word is deliberately. Whitespace is not what is left over after design. It is one of the main tools of design.

What whitespace actually does

It is easier to protect whitespace when you can name its jobs. It does at least four.

It groups things

People read closeness as relatedness. Items that sit near each other look like they belong together; items with more space between them look separate. This is one of the most dependable principles in visual design, and whitespace is how you apply it.

Consider a contact section with a heading, an address, a phone number, opening hours and a map. If the space between every item is identical, the reader has to work out the structure. If the address and phone number sit close together, the opening hours sit close together as their own small block, and there is a larger gap before the map, the structure becomes obvious without a single line or box.

It creates emphasis

An element surrounded by space draws the eye. This is why a single headline in the middle of a calm area feels confident, while the same headline crowded by other elements feels like one voice in a noisy room. If you want something to be noticed, giving it room is often more effective than making it bigger or brighter.

It sets the pace

Generous space slows the reader down and signals that each part deserves attention. Tighter space speeds them up and signals density, which suits reference material, menus and listings. Neither is wrong. The pace should match the content.

It shapes perception

Rightly or wrongly, people tend to associate spacious layouts with calm, care and confidence, and crowded layouts with urgency and bargains. A discount warehouse might legitimately want a busy, energetic feel. A wedding photographer almost certainly does not.

Micro and macro whitespace

It helps to think about whitespace at two scales.

Micro whitespace is the small stuff: the space between letters, between lines, between a label and its input, inside a button around its text. When micro whitespace is wrong, things feel cramped or sloppy, even if the reader cannot say why. A button whose text almost touches its edges looks cheap. A form where labels float halfway between two fields is confusing.

Macro whitespace is the large stuff: margins around the page, space between sections, the gap around a hero headline. When macro whitespace is wrong, the page feels either overwhelming or disjointed.

Both scales need attention, and they should relate to each other. The space between sections should be clearly larger than the space within a section, which in turn should be larger than the space between items in a group. That nesting is what makes a page feel organised.

Common ways whitespace gets lost

Whitespace rarely disappears in one big decision. It erodes gradually.

• Fear of the fold. The belief that everything important must be visible without scrolling leads to cramming. People do scroll, especially when the top of the page gives them a reason to.
• Equal spacing everywhere. When every gap is the same size, nothing groups and nothing stands out. The page feels flat.
• Adding instead of choosing. Every new element takes space from every other element. Three trust badges, two banners and a newsletter pop-up compete for the same attention.
• Edge-to-edge text on phones. Tiny side margins on mobile make text feel pressed against the glass. A consistent side gutter, often around 16 to 24 pixels, makes a big difference.
• Shrinking padding to fit. When content does not fit a card or button, the padding is often reduced instead of the content being edited.

How to use whitespace deliberately

Decide what matters most on each page

You cannot give everything breathing room. Pick the one or two things that matter most on a page and give them the most space. Everything else can sit more compactly. A café's home page might give the most room to its opening line and opening hours, while the list of menu categories can sit closer together.

Space from the outside in

Start with the largest spaces: page margins and section gaps. Then define the space between groups within each section, then within groups. Working from large to small helps you maintain a clear hierarchy of gaps rather than choosing each one in isolation.

Use a limited set of spacing values

Choose a handful of spacing sizes and stick to them. When all your gaps come from the same small set, the page develops a consistent rhythm, and decisions become faster because you are choosing between a few options rather than any number.

Edit the content, not the space

When a section feels crowded, the first instinct is often to squeeze. Try the opposite: remove something. A shorter introduction, one fewer feature, a single clear button instead of two. Editing frees space more effectively than any layout trick.

Let images breathe too

Photographs and illustrations need margins just as text does. An image jammed against a block of text, or cropped tight to the edge of its container with no gap, loses much of its impact.

A quick exercise

Take a page from your own site and print it, or take a screenshot and view it small. Blur your eyes slightly. You should be able to see distinct groups, with clear gaps between sections and a natural starting point for the eye. If it looks like one uniform texture, the spacing is not doing its job.

Then try removing one element entirely. Do you miss it? If not, it may have been taking space that something more important deserved.

Whitespace checklist

• Related items sit closer together than unrelated items.
• Space between sections is clearly larger than space within them.
• The most important element on each page has the most room around it.
• Buttons and inputs have comfortable internal padding.
• Phone layouts have consistent side gutters.
• Spacing values come from a small, repeated set.
• When something feels cramped, you tried removing content before reducing space.

Empty space is never really empty. It tells the reader what belongs together, what matters most and how quickly to move. Leave it in on purpose, and protect it from the urge to fill.