Whitespace — the empty space between and around elements on a web page — is one of the most consistently misunderstood tools in web design. Clients ask for it to be reduced. Stakeholders fill it with content. Developers collapse it to save space. All of these instincts, however understandable, work against the user.

Why whitespace is not wasted space

When a web page feels overwhelming or difficult to read, the cause is almost always density. Too many elements competing for attention. Too little breathing room between sections. Too small a gap between a heading and the paragraph that follows it. The page is technically complete, but it is exhausting to use.

Whitespace does not represent an absence of design. It represents a considered use of space to give content room to be understood. Every gap between paragraphs, every margin around an image, every padding inside a button — these are decisions that communicate hierarchy, group related content, and guide the user's eye from one element to the next.

The Nielsen Norman Group, whose research on web usability is among the most cited in the industry, has consistently documented the measurable effect whitespace has on reading speed and comprehension. Pages with generous line height and paragraph spacing are read faster and retained more easily than dense equivalents. This is not a matter of aesthetic preference. It is user behaviour.

Macro and micro whitespace

It helps to think of whitespace in two categories. Macro whitespace is the large-scale breathing room: the margins around the main content column, the space between major sections, the padding at the top and bottom of the page. It gives the layout its overall sense of air and proportion.

Micro whitespace is the small-scale version: the gap between a label and an input field, the space between list items, the letter-spacing in a heading, the line height within a paragraph. These smaller gaps are less visible individually, but their cumulative effect on readability is significant.

Both matter equally. Neglecting macro whitespace makes a page feel claustrophobic. Neglecting micro whitespace makes individual elements feel cramped and difficult to parse. Strong web design attends to both levels, and the decisions are made deliberately — not left to browser defaults.

Whitespace as a grid tool

In Swiss grid-based web design, whitespace is not applied after the fact. It is built into the system. Gutters between columns are a form of whitespace. Baseline grid increments determine vertical rhythm between elements. The grid and the whitespace are the same thing, expressed at different scales.

If you are working with a structured layout approach and want to understand how whitespace relates to the underlying grid, our guide to the Swiss grid system in web design covers the practical implementation in CSS, including column definitions, gutters, and breakpoint behaviour.

Whitespace and typography

The relationship between whitespace and type is especially critical in web design. Line height — the vertical space between lines of text — is the most direct form of micro whitespace in any text block. Setting it too tight makes body copy exhausting to read over long passages. Setting it too loose disconnects lines from each other and disrupts the natural flow of reading.

A reliable starting point for body text is a line height of 1.7 to 1.8 times the font size. For a 20px font, that is a line height between 34px and 36px. This is not a rule — it is a baseline from which you calibrate based on the typeface, the column width, and the content type. Editorial text invites closer spacing than functional UI text.

For a deeper look at how typographic decisions and spacing interact across a web design project, our post on creating typographic hierarchy in web design works through the principles of scale, weight, and spacing in detail.

Selling whitespace to clients

The practical challenge for most web designers is not understanding whitespace — it is defending it. Clients who commission a website often equate more visible content with more value. Every open area looks, to an untrained eye, like a missed opportunity to say something else.

The most effective argument is not aesthetic. It is functional. Show the client comparable examples — a dense layout and an airy one — and ask which feels more credible, more premium, more trustworthy. Frame whitespace not as emptiness but as clarity. Clarity, in a product the client wants people to actually use, has obvious commercial value. Luxury brands have known this for decades.

Practical defaults worth using

These starting points are worth building into any web design project from day one:

  • Body text line height: 1.7–1.8
  • Paragraph spacing: equal to or slightly greater than line height
  • Section padding: at least 80px top and bottom on desktop
  • Component inner padding: scale with the component's visual weight — larger, more prominent elements earn more padding
  • Maximum content column width: 70–75 characters, regardless of viewport size

These are not rules to follow blindly. They are defaults that work well across a wide range of projects — a foundation from which you make deliberate exceptions rather than arbitrary ones.