The Paradox of White Space: Some Research and Examples of White Space in Web Design

White Space is a principle of layout and design well known among graphic artists, but less known and practiced among some technical writers. I have a deep interest in Web design, and white space seems to be one of the first, fundamental principles of design for both on and offline content.

Paradox of White Space

White space also has an interesting paradox surrounding it: The absence of graphics and text plays a significant role in increasing comprehension of the text and of focusing attention on graphics. The absence of content is what draws the eye towards content. The negative, blank space (which possesses nothing) creates a sense of sophistication and elegance. The sense of simplicity and absence of graphics and text is what contributes toward a richer, deeper and more complex artistic expression.

Authors on White Space

Below are a few excerpts from authors writing about white space.

This author notes that white space contributes to a sense of refinement:

In western culture we associate uncluttered spaces with good taste, refinement and affluence. It is also more restful to the eye to read or view items that have a generous amount of white space surrounding them. That is why museums always use broad white walls as a backdrop for paintings on display.

On the Web, white space is essential when the viewer is required to read large amounts of content. Generous margins and clear simple layouts make it easier for the eye to work. Cluttered layouts tire the eye quickly and hinder clarity. Also, just as in advertising, uncluttered layouts convey a sense of good taste and refinement. (Source: Newark1)

Newark1′s site itself is a good example of white space. It seems to have a nice sense of balance as well.

Newark

This author also explains that generous white space creates a sense of luxury and elegance:

Designers use whitespace to create a feeling of sophistication and elegance for upscale brands. Coupled with a sensitive use of typography and photography, generous whitespace is seen all over luxury markets. Cosmetics, for example, use extensive whitespace in their marketing material to tell the reader that they are sophisticated, high quality, and generally expensive. (Source: A List Apart)

Here’s a screenshot of the Tiffany & Co. jewelry site.

Tiffany’s

This author compares white space to breathing space, and uses the metaphor of blowing up a balloon to describe a healthy need for white space:

Today’s web designs are so fresh, they feel like they’ve taken a deep breath. Sometimes I imagine taking a page design that’s too crowded and sticking it on a balloon, then blowing air in until everything on the page pulls apart to leave healthy gaps. Your eye needs space (guttering in typo language) round stuff to help you clearly and cleanly identify things. In general, the more white space the better. It’s very rare that I look at a page and think: “Gosh, they really need to cram that page up a bit!” Of course, “white” space doesn’t have to be white. But it does have to be space! It’s great to see so many designs using good-sized margins to space elements apart, and extra line-height to aid on-screen reading. Look at all this lovely refreshing white space! (Source: Web Design from Scratch)

This Nielsen eye-tracking study found that more white space increases comprehension and reduces the time required to move through a page. Another study finds a similar conclusion about the cognitive benefits of white space:

In this study, reading performance with four white space layouts was compared. Margins surrounding the text and leading (space between lines) were manipulated to generate the four white space conditions. Results show that the use of margins affected both reading speed and comprehension in that participants read the Margin text slower, but comprehended more than the No Margin text. Participants were also generally more satisfied with the text with margins. Leading was not shown to impact reading performance but did influence overall user preference. (Source: Witchita Psychology)

This author says there is an increasing trend toward simplicity and minimalistic design — both of which are highly based on the concept and use of white space:

Last year we’ve seen a lot of simple, even minimalistic designs, which impress not with the amount of presented information but with the way the information is actually presented. Complex layouts are giving way to simple 2-col- or 3-col layouts, which usually have large amount of white space without any content whatsoever. Indeed, the importance of both white space and simplicity shouldn’t be underrated. Used correctly, they can enhance the performance of a web-site, improve readability and make a great first impression. (Source: Smashing Magazine. By the way, this link has some excellent resources on white space and the simplicity of design.)

Smashing Magazine itself is a good example of white space:

Smashing Magazine

This author comments on the macro effect of adding white space in micro areas, particularly in a redesign of the Economist:

Whilst retaining the quirkiness of the original Economist typeface, Spiekermann redesigned it slightly, adding more whitespace to the individual characters. He then set the type slightly smaller and with more leading. All these changes added micro whitespace to the design. The overall result was subtle: the content was more legible and the overall feeling of the newspaper was lighter, yet the amount of content remained the same.

Though Spiekermann also added macro whitespace and color to The Economist his successful type redesign demonstrates that the space between the itty-bitty stuff can have a big impact on the effectiveness of a design—and this applies to design for the web as well. (Source: A List Apart)

Here’s the author’s graphic showing the difference between micro white space and macro white space:

Micro vs. Macro

Here is the white space used on the A List Apart site:

A List Apart

In reading about white space, I came across a blog with an abundance of white space. I’m not so sure the Notes column (with no notes) does much for the design, but if it did have some scribbles and highlights, it would be an appealing design.

Blog

Paul Boag talked about the importance of white space in this podcast (titled “Bulletproof”). He also wrote an essay giving advice on design for developers. Paul says:

Whitespace is the not-so-secret weapon of good design. For simplicity sake, I think the rule of thumb is to add more whitespace than you are naturally inclined to do. Whitespace improves legibility, gives a sense of simplicity and communicates a feeling of openness and style.

In order to limit scrolling, we feel the need to cram as much content in as possible so squeezing out whitespace. Resist this temptation. Be generous in your padding, margins and line height. Don’t be afraid of “empty” parts of the screen.

Applying the Principle of White Space

White space is not just about increasing margins, paragraph spacing, and the space between sections. Expert use of white space maintains balance, provides a sense of elegance through simplicity, and focuses the reader’s eye on a desired part of the page or screen. Most of all, white space provides a sense of breathing space for the viewer.

Do the sites you visit have much white space?

Madcap FlareAdobe Robohelp

This entry was posted in general, web design on by .

By Tom Johnson

I'm a technical writer working for The 41st Parameter in San Jose, California. I'm primarily interested in topics related to technical writing, such as visual communication (video tutorials, illustrations), findability (organization, information architecture), API documentation (code examples, programming), and web publishing (web platforms, interactivity) -- pretty much everything related to technical writing. If you're trying to keep up to date about the field of technical communication, subscribe to my blog either by RSS or by email. To learn more about me, see my About page. You can also contact me if you have questions.

11 thoughts on “The Paradox of White Space: Some Research and Examples of White Space in Web Design

  1. Gordon

    I think the paradox is really only applicable on the first visit or so… there are many websites I visit daily which don’t have that much whitespace but the content is good enough that I tolerate it.

    However I’m much more inclined to stick with a recently discovered website if the design is attractive to me and that, invariably, means good use of white space. It’s something I try and consider when creating websites myself but of course sometimes the client prefers a little more clutter than I’m comfortable with myself.

  2. Hal

    Outstanding article! There’s a trend these days away from this, with everyone cramming as much as possible into very busy sites (due to client requests, I’m guilty as well), but there’s a lot be learned from the excellent examples in this post.

  3. Gloria Hildebrandt

    As a writer, I learned about white space from designers. Writers tend to see empty space as needing to be filled with words. Designers taught me that less can be more. Now I try to give them the room to create the balance they want. But balance is key. Too much white space can look like an incomplete design.

  4. Guilherme Zühlke O'Connor

    Great post!

    In western culture we associate uncluttered spaces with good taste

    I think that this is not entirely true. First because some eastern cultures have a very minimalistic artistic tradition, and for the other part, western culture sometimes really likes some chaos.

    While the modernist movement was cemented over Mies van der Rohe’s well know phrase “less is more”, all the punk movement was created over visual chaos.

    What is true, is that white space helps us to relax and read (which is not what the punk movement was intending, of course).

    White space is a relaxation area to avoid the rest of the content to fly over you like a bird of prey.

  5. Pingback: Technical Writing Blogs Group Page - Blogdigger Groups

  6. Pingback: Zo’C » The importance of White Space in design

  7. Pingback: Blog News Watch » Blog Archive » Weekly Roundup: Week Ending July 13, 2007

  8. Rhonda

    For more research/articles about the use of white space, line length, fonts etc. on web pages, take a look at some of the resources I found when preparing for a presentation I did at two 2006 conferences: http://www.cybertext.com.au/services_edit.htm – the Resource list (PDF) associated with the “Reviewing screen-based content” presentation is the one you need. (Note: I haven’t checked recently that all links still work, so apologies if some are now out of date.)

  9. Tom

    Thanks for the link to the presentation. I thought the starfish and fish motif in your graphics was pretty clever.

  10. Rhonda

    I used both as the conference was in Cairns, gateway to the Great Barrier Reef in Queensland, Australia. Starfish and pretty fish abound!

  11. Pingback: 7 Surefire Ways To Commit Blog Suicide — The Writer’s Round-About

Comments are closed.