Can a web page have too much white space?

Can a web page have too much white space? It’s an innocent question and may even appear to be impertinent given how much white space is embraced, even revered, by web designers - myself included. White space is at the heart of the less is more design philosophy where a less-crowded page design promises to offer visitors a higher-quality user experience. So can its over-use lead to a less is much less result? Let’s examining this by starting with a brief recap on the nature and role of what designers call white space.

What is white space?

Let’s take an example. A while back I wrote about reader view, an option that many browsers offer to simplify the visual appearance of a web page so that readers can settle down to engage with content more easily. Viewing that blog post on a desktop with Mozilla Firefox shows the page within the context of the blog section of the website. The site header and menus occupy the page alongside the content of that post. Hitting F9 in Firefox suddenly strips out everything except for the content of the post. It also changes the font, font size and line height and length. See the differences here (click/tap for larger versions):

Although the desktop version - as designed - uses a lot of white space, Firefox’s reader view adds even more by stripping out ‘cruft’ and applying even more ‘generous’ or ‘comfortable’ typography. Font size is increased, line length is shortened, line height is increased and anything deemed ancillary to the content is hidden.

White space aids the legibility of text in pursuit of increasing the readability of content. By helping the visual rendition of content breathe more, it is hoped that the reader’s experience is more comfortable and engaging. [Note that white space needn’t be white. It can be any background colour on which a page’s content sits.]

White space can be considered the equivalent of silence in music. Without it, a composition risks lacking structure and becomes difficult to consume.

What contributes to increased white space?

Because white space is also called negative space it should be clear that white space is ‘unoccupied space’. When a designer favours white space, the gaps between elements on the page are increased. That applies across the board and can include varying any or all of the following:

• Increasing the height of lines of text with the CSS property line-height (in print this is known as leading).
• Increasing the space between letters or between words by choosing a type family and/or by using the CSS property letter-spacing (in print this is known as kerning) or word-spacing. In most cases, choosing a well-made type family will be all that the designer needs to do.
• Increasing margins around paragraphs, blocks, menus, menu items, images, captions, list items, calls to action, form objects and buttons.
• Increasing the margins around headings.

What does white space achieve?

Used correctly, the above design elements can increase legibility, readability, comprehension, comfort and engagement. But this is rarely enough. Something else is required, thought of as design ‘judgement’. This applies considerations of logical grouping and proximity so that a balance or flow is achieved for the reader. These considerations are harder to define but play no less a role in achieving a satisfactory design.

Judgements about proximity and balance

In web page design everything is relative - and this is especially true when considering white space. If a heading, for example, is closer to the paragraph that precedes it rather than to the one that follows it, that’s a judgement that the principle of proximity has been ignored, that the expected relationship between page elements has been dislocated. Headings, after all, introduce the text that follows them rather than summarize the text that comes before them. If a caption to an image above it is separated from the image by what seems to be too much white space, the proximity principle has again been ignored. Part of this involves judgements about what we expect readers to encounter and, by inference, removing potential disruptions to that expectation which a page design may throw up.

Subconsciously, we group together items that are related - and distinguish between items that aren’t related to the same extent. Proximity is the most obvious way of establishing these relationships. So whilst white space eases these relationships, proximity across white space can help establish them. There’s a balance to be achieved in establishing a page’s visual hierarchy, and it is preferable that this follows the page’s semantic hierarchy.

Honouring content

The old aphorism that ‘content is king’ is central to any debate about web page design. Content comes from the client and the designer passes it to the public. Get that hand-over wrong and the project fails. The need to honour that content so that a design doesn’t smother or obscure it is paramount. Designs have to avoid ‘getting in the way’. White space plays a key role in foregrounding content.

When does an increase in white space start reducing those gains?

White space is good, yet the contention I’m advancing here is that there’s a point where more white space no longer makes a design better, but can make a design radically worse. Some of these relationships are matters of degree, such as when margins have simply grown too wide or font sizes are unbalanced. At other times, the gains of white space may be cancelled by the poor introduction of design elements.

When proximity between logically-related elements on the page diminishes through the introduction of excessive white space, we should expect to see that flow has been interrupted and comprehension falls. If the reader starts to be uncertain about where the eye should track next, then it’s possible that upcoming affordances have been moved too far from the current area of interest and the reader’s sequential flow through a page’s content has been disrupted. Some examples may help.

Columns in body text: columnar text layout is a standard feature in printed design, but its inclusion in web page design should be challenged. One might be tempted to offer columns as a way of shortening the line length of body text - and no bad thing. If a page’s body text results in a length that is substantially greater than 45 - 75 characters (including spaces), then the solution is not to introduce columns to fix this. It would be better to reduce the line length. One does not want readers scrolling down, then back up and then down again to work their way through an article. The direction of flow should be unidirectionally downwards - and only that. A solution to one problem shouldn’t introduce another.

A columnar layout can be very effective when dealing with lists of short text items, even links, but rarely of body text consisting of paragraphs.

Loss of context: what if when a page loads, we see just a heading, one so generously-margined that the article’s first paragraph is hidden below the fold? What happens to our expectations? Is our curiosity peaked so that we are more motivated to scroll to the content that we assume might be lower down the page? Or are we frustrated that our expectations have been thwarted so quickly? It depends on the context, of course. But isn’t it more the norm that we see a page’s h1 heading and a portion of the page’s first paragraph when a page first opens? I believe it is. We don’t want white space to have pushed the opening salvos of that content out of view.

What do we do if we don’t see even the page’s h1 heading because the white space above it pushes that too below the fold? Will we be so disoriented that we give up and do something else? Likely, in my opinion, but hard to know for certain without checking the bounce rates for such pages. Again, we need to make judgement calls in advance.

Richard Rutter advocates achieving a consistent vertical rhythm in page design:

The vertical rhythm of a design is formed by the arrangement and spacing of text encountered by your reader as they descend the page. If spacing between lines and blocks is inconsistent, the rhythm will be inconsistent, leading at best to an untidy feel to the composition, and at worst a jarring reading experience. (Web Typography Richard Rutter; Ampersand Type, 2017, p. 171.)

He sets out a method for achieving this consistency using a ‘vertical rhythm unit’ based on the line height of body text. Embedded media can interrupt that; one “restarts the beat when the text recommences”. Likewise, a paragraph’s bottom margin should match body text line height. Headings should have top and bottom margins that are multiples of each heading’s line height. The resulting consistency will generally provide the designer with a measure of white space that is suited to the type family, without needing to locally inject more.

This system is a suggestion, a means of achieving consistency. Others may achieve a similarly tidy effect. Tweaking the volume of white space by introducing local fixes - maybe because they ‘feel right’ - will inevitably appear haphazard. Readers will notice something ‘wonky’ about the design even if they can’t verbalise what’s going on.

Richard Rutter is explicit about the value of white space:

The practical value of white space towers over its value as a design element. A page with generous amounts of white space might look nicer, but it’s not about taste; it’s a welcome side effect: the logical consequence of functional design. (Web Typography Richard Rutter; Ampersand Type, 2017, p. 182.)

It therefore follows that as the quantity of white space expands to being more than generous its practical value can decrease.

Essential screen updates: what if a page begins with a panel of search-selection controls which update results below when interacted with? So good to have search controls that give immediate feedback with updated results, but what if those results have been pushed so far down the page by white space that they too are out of view when the controls above refresh the part of the screen below the fold? This is a case of defying expectations. We expect interaction with screen controls to have some effect, but if we can’t see what that effect might be, then something has gone wrong.

Can we measure when there’s too much white space?

One ultimate measure of whether a page has so much white space that readers struggle to read the content might be if a page has a dramatic bounce rate - and users jump to a different page - or even leave the site. The latter consequence would be grim.

Short of studying the metrics, one could run a layout audit using a scheme of the sort advocated by Richard Rutter, as mentioned above. That might involve measures such as the following:

• Is the spacing between paragraphs of body text greater than, say, twice the paragraph’s line height?
• Is the spacing before or after an h1 or h2 heading greater than, say, twice its line height?
• Is the spacing before or after an embedded image greater than twice the line height of any paragraphs before or after it?

These are attempts to add measurable objectivity to the art of page layout. They are examples only, so establish your own measures that are appropriate for your specific design. The purpose is to attempt to quantify when adjacent elements on a page have been separated beyond the tolerance of the reader. My contention is that too much white space can be just as much a handicap as too little white space. In both instances, it is the reader who suffers.

Contracts implicit in the exchange of written information

In a seminal volume written back in the 80s, the Canadian professor of psycholinguistics, Frank Smith, considered the nature of what he called the writer-reader contract and wrote the following:

There are three parties to every transaction that written language makes possible: a writer, a reader and a text. And of the three, the text is the pivot … Writers must produce texts and readers must interpret them and the text always stands between the two, a barrier as well as a bridge … Like a river that permits communication between one shore and another, the text is also an obstacle that keeps the two sides apart. (Writing and the Writer Frank Smith; Heinemann Educational Books, 1982, p. 87.)

These words loom out of a pre-internet gloom but now seem prescient. Smith didn’t dwell on the role played by print typography and page layout - and may not have dwelt too long on web typography and page design had he been writing about this ‘contract’ today. But the concept of a contract that might exist between authors and their readers today must inherently include the role played by designers of web pages. The ways in which they employ - or ignore - different typographic conventions and wrap an author’s content in different web page layouts will inevitably impact the quality of the reading experience. The role played by white space in this will determine whether a web page design functions as a barrier or a bridge.