Whitespace in web design: using space to group, not to look expensive
Whitespace is the space between and around things, and its main job is to show what belongs together. Put less space inside a group than between groups, keep paragraphs to a readable width, and let sections breathe. Space that separates nothing from nothing isn't generous, it's empty.
Space is information
Before anyone reads a word, they see clusters. A heading sitting close to the paragraph below it reads as that paragraph's heading. A price close to a product name reads as that product's price. Gestalt psychologists described this as the principle of proximity: things near each other are perceived as related. Whitespace in web design is mostly the deliberate use of that principle.
It follows that the most important spacing decisions are ratios rather than amounts. A heading should sit noticeably closer to its own content than to the section above. A card's internal padding should be smaller than the gap between cards. A label should hug its field. When those relationships hold, a page can be dense and still easy to scan; when they don't, even a sparse page is confusing.
Two kinds of space
- Micro space
- The small gaps: line height, letter spacing, the padding inside a button, the distance between a label and its input, the space between list items. It decides whether text and controls are comfortable to read and use.
- Macro space
- The large gaps: margins around the page, the space between sections, the distance between columns. It decides the page's rhythm and how much fits on a screen.
Most problems come from getting one right and ignoring the other. A page with lavish section gaps but cramped line height looks airy and reads badly. A page with comfortable text but no space between sections reads as one long block.
Generous versus empty
Large amounts of space have become shorthand for premium. Luxury brands use it, so pages that want to look upmarket copy it. The result is often a headline floating in an otherwise blank screen, a hero stretched to the full height of the window, and the first piece of real information several scrolls away. That isn't restraint. It's a page asking the visitor to do more work before they learn anything.
- Generous space frames something worth looking at: a photograph, a short headline, a price. Remove the content and the space would look wrong.
- Empty space frames nothing. It exists because a template had a tall section and nothing was written to fill it.
- A test: on a phone, can you see at least one fact about the business (what it sells, where it is, when it opens) without scrolling? If not, the space above the fold is empty rather than generous.
Practical decisions
- Cap the reading width. Long lines are the most common spacing failure on desktop. A paragraph column of about 60 to 75 characters gives text margins without needing a decorative layout.
- Space sections by their relationship. Related sections, such as a service list and its prices, can sit closer than unrelated ones, such as prices and the team.
- Shrink space on phones, proportionally. Section gaps of 100px on a laptop might be 56 to 64px on a phone. Inner spacing, such as button padding, should shrink far less, because fingers don't get smaller.
- Let one thing per screen have the most space. Usually the headline or the main photograph. If everything gets the same lavish margin, nothing is emphasised.
- Don't fill space with decoration. A blank area isn't a problem to solve with a gradient blob or an icon. If it looks wrong, reduce it.
It also helps to stop thinking of whitespace as white. It's simply ground: on a dark theme it's charcoal, on an Organic palette it's warm sand. What makes it work is that it's uninterrupted, not its colour. For the numbers behind consistent gaps, see spacing systems for web design.
Whitespace and accessibility
Spacing affects more than looks. Readers with dyslexia or low vision often benefit from extra line and paragraph spacing, and WCAG 2.2 asks that a page still works when someone overrides line height, paragraph spacing, and letter and word spacing to larger values. Layouts with fixed-height boxes and tight gaps are the ones that break. Generous tap spacing between links also helps anyone with a tremor or a large thumb.
How Anticode handles space
Anticode's design engine sets spacing in tokens: section padding, the gap between items and the padding inside cards are defined once for the whole page, and the large steps shrink on narrow screens, so sections don't tower over a phone. The Critic also flags a hero forced to the full screen height, one of the commonest forms of empty space in generated pages.
When you want a specific gap changed, the layout editor's keyboard inspector adjusts gaps and alignment for a selected element. What Anticode can't judge is whether a particular empty area is framing something worth framing. That still needs someone to look at the page on a phone and ask the question above.
Questions people ask
How much space should there be between website sections?
On desktop, often 80 to 120px; on phones, roughly half to two-thirds of that. What matters more is that the gap between sections is clearly larger than the gaps inside them.
Can a website have too much whitespace?
Yes, when the space frames nothing and pushes useful information below the fold. Generous space should always be around something worth looking at.
Does whitespace have to be white?
No. It's any empty background, whatever its colour, including dark themes and tinted grounds.