Whitespace

by Mark Boulton

58 Reader Comments

Back to the Article
  1. Excellent article on an often overlooked topic!

    Copy & paste the code below to embed this comment.
  2. Just a heads-up: I believe you meant economist.com instead of theeconomist.com (: The former goes to the newspaper.

    Copy & paste the code below to embed this comment.
  3. It’s interesting to read an article about nothing – nothing as the absence of content. Yet I just had an intuitive feeling that there must be more space here or there, but after reading the article the why and how becomes more clear to me.

    Copy & paste the code below to embed this comment.
  4. Finally, an excellent article that sums up what we have been trying to tell clients for years.

    Unfortunately we are somewhat limited with web tools (low resolutions, limited font selection, etc.).  This should not, however, be used as an excuse to discount the amount of time we spend on tweaking whitespace; on the contrary, we need to concentrate more and attempt to compensate through other means.

    Where The Economist was able to make some subtle font changes to lighten the heavy feel of the paper; with the web we would need to look at other changes we could make, like adjusting margins and increasing the general amount of macro whitespace to try and achieve the same goal.

    Copy & paste the code below to embed this comment.
  5. While The Economist refers to itself as a “newspaper”, it is misleading in this context given the published form is that of a magazine.

    Copy & paste the code below to embed this comment.
  6. Great article, thanks.

    Copy & paste the code below to embed this comment.
  7. Great article, countless are the times when you feel something and find someone who can put clear words on it to explain.

    Another suggested author in the field is Robert Bringhurst’s book “The Elements of Typographic Style”:http://www.amazon.com/Elements-Typographic-Style-Robert-Bringhurst/dp/0881791326 and how it can be “applied to the web”:http://www.webtypography.net/.

    BTW, I do like the nothing idea! As “someone already outlined”:http://www.amazon.com/Debt-Pleasure-Novel-John-Lanchester/dp/0312420366 that the ultimate—and only—art is the absence of life.

    Copy & paste the code below to embed this comment.
  8. Many thanks Mark for a fantastic read. This article will really help me over the next few projects. I can also see this article acting as a back-up to my white space beliefs – pointing non-believers in the direction of this article should shut them up for a bit!

    Copy & paste the code below to embed this comment.
  9. A great article! Handy when yet another client wants his whole brochure cramped in a small add. I will just let them read this =)

    Copy & paste the code below to embed this comment.
  10. Mark and I have discussed space – white or otherwise – a number of times. Normally while complaining about clients’ perception of space as lack of design.

    The way I tend to approach this comment is to make parallels to architecture. No architect thinks just about the walls, floor and ceiling of a room but rather the space – open, closed, joined. Space in a building channels your experience, overwhelms or astounds you, enwraps you and serves you.

    I just wish more people understood that space in graphic design is the same – on screen or on the page. We construct our understanding of what is there by the ‘nothing’ that surrounds it.

    Copy & paste the code below to embed this comment.
  11. Ruder, Spiekermann, Bringhurst…

    Good to see the work of some quality typographers getting metions.

    Good job Mark, nice article.

    Copy & paste the code below to embed this comment.
  12. Whitespace seems to be an issue I run into a lot of people, some want way too much and others want almost none. It is hard to talk to people about the balance of whitespace.

    Copy & paste the code below to embed this comment.
  13. Great article. I love reading your essays, particularly on your site. I am decidedly inexperienced myself when it comes to typographical design, but when encoding a website’s CSS I find that I spend more time playing with whitespace than anything else.

    Copy & paste the code below to embed this comment.
  14. Yep! A great discussion on this oft-overlooked topic!

    Copy & paste the code below to embed this comment.
  15. Thanks for the enjoyable read, especially the graphical section on cheap and luxury advertising. I hasten to question why people advertise in the cheap fashion at all; I find it strange that “direct-mail packages need to appear down-market to work” although I see that the average proletarian might prefer a lower-market advert with price being more important than quality.

    Coming from a purely mathematical background the actual task of designing a good-looking website is quite a time consuming process. It is amazing how a few changes in how paragraph text is formatted can increase the readability and popularity of a specific page.  A List Apart actually has one of my favourite designs as it is appealing and inherently usable.

    I have found that using the Golden Section and symmetry in my work to calculate white-space (relative to box size) increases the usability and aesthetic appeal of an application/website.

    Copy & paste the code below to embed this comment.
  16. Quoting Michael Clark:
    “I have found that using the Golden Section and symmetry in my work to calculate white-space (relative to box size) increases the usability and aesthetic appeal of an application/website.”

    It’s curious how the theme of grids and natural proportions (Fibonacci, Golden Section) go hand in hand.
    Andy Clark in Transcending CSS, discusses the same subjects, applying margins and paddings as gutters (similar to print layouts) and estimates the proportion of the content blocks on a ratio of aprox. 1.62.

    Copy & paste the code below to embed this comment.
  17. Great article and I am really full of hope to see more articles about typography from you. People should be educated. So far typography is the weakest place of major amount of web sites. Designers treat text as “Lorem ipsum” and coders don’t know typography, so at the end nobody cares about text.
    Thank you, Mark, for touching very important, yet forgotten topic.

    Copy & paste the code below to embed this comment.
  18. .. my younger brother, who is aspiring to become a graphical designer himself and take a 2-year study for it. For some reason he can’t seem to grasp the concept of “padding” in his website designs. You know, all his texts are cramped to the border of the window, design elements, each other, etc.

    I’ll definitely show him this article. Thanks a bunch!

    Copy & paste the code below to embed this comment.
  19. Unfortunately we are somewhat limited with web tools (low resolutions, limited font selection, etc.)

    The great advantage that the web has over printed media is that space is cheap … so cheap it’s free! If you want to print a document with white space, you have to either compromise by reducing the size of the text, or by adding more pages (at a cost!) … on the web, you can add white space with impunity, and the only cost is that a reader has to scroll that fraction further.

    Copy & paste the code below to embed this comment.
  20. What a useful and informative article! There are a lot of websites out there that can use this information to increase the quality of their site.

    Copy & paste the code below to embed this comment.
  21. Steven. In my experience, adding more whitespace in print is not an issue of production values (print, pages and such), but much more of a conscious brand decision. In my early example, I spoke about a client who wanted to fill all available whitespace. Initially, I thought his motives were because he was paying for it. Now, given that direct mail generally appears more down-market, I’m not so sure that was the case.

    So, on the web, just because we can add whitespace, should we? I guess I’m saying that these decisions should be a part of a rationalised design process so the cost to the user is potentially much more than scrolling.

    Copy & paste the code below to embed this comment.
  22. Sadly, it’s too late to educate most clients about white space after they’ve spent a lifetime NOT worrying about how design people feel about white space. Most successful smaller clients have prepared successful material that worked without white space, so it’s a tough sell. The trick is to find clients that like the way YOU design things.

    Copy & paste the code below to embed this comment.
  23. Call me ignorant, but I was unfamiliar with the term ‘down-market’ until the Brand Positioning section. Out of curiosity, why do direct-market mailings do better with a down-market approach?

    Copy & paste the code below to embed this comment.
  24. For my day job I work as Cellar Door Manager for a winery, and the Boss (an ex-lawyer) asked me to redesign his website & do all the posters, winelists etc that we use in the Cellar Door (everything he has done is jam packed – center everything, ALL CAPS, lots of exclamation marks & horribly inconsistent( 4 different versions of our ‘tag’ etc) & I find I am constantly fighting the battle for more whitespace.

    I printed this article & gave it him & he was most impressed with the grapical example, and as he wishes to be more upmarket, I have my new marching orders & am now happily ripping out unneccessary elements, adding whitespace – although he hasn’t yet grasped the fact that whitespace is not always ‘white’ – just devoid of text & gimracks

    Copy & paste the code below to embed this comment.
  25. Thank you for sharing. You made our day.

    Copy & paste the code below to embed this comment.
  26. Thanks a lot for writing this !

    Months ago i was making the same constatation (even the smaller space between letters is changing the way we feel a page or a graphic), but i never took the time to go further and to precisely understand / explain it, which could have been helpful.

    You did it, thanks !

    P.S : This article allowed me to discover this blog I definitly appreciate, thanks for it too.

    Copy & paste the code below to embed this comment.
  27. Brian LePore asked

    >Call me ignorant, but I was unfamiliar with the term “˜down-market’ until the Brand Positioning section. Out of curiosity, why do direct-market mailings do better with a down-market approach?

    I wondered about this too until I spent time with my step father, (he married my mom when I was 32) who has spent much of his life selling remainders to people who run discount stores and flea markets. He’s been quite successful at it and loves to share his knowledge.

    There is a market that considers elegant to be snobbish. You don’t try Cartier marketing in K-Mart. Donald’s newsletters and mass market mailings are plainly ugly but very effective.

    His advice is to know your market. True bargain hunters avoid anything that looks expensive like the plague. Highly readable text with just so spacing looks expensive. Expensive equals elitist, snobby, better-than-thou to a fairly large market segment. Just as fine china and crystal ware are out of place in a fish and chips or burger joint, so is elegant typography to a bargain basement, budget buyer. Look at some of the home pages of successful Ebay sellers. Most are butt ugly with horrible type, colors, white space and so on, but they work for their buyers.

    Copy & paste the code below to embed this comment.
  28. Practical, useful knowledge applied to real-world examples in an interesting way.  For me that’s what ALA is all about.  Great article.

    Copy & paste the code below to embed this comment.
  29. I must agree with the “Nothing” comment.  It’s good to have some black and white support my stance for more or less white.  And, even having intelligent terms for what and how the “negative” space is actually “positive” for design.

    Most excellent article!

    Copy & paste the code below to embed this comment.
  30. I must agree with the “Nothing” comment.  It’s good to have some black and white support my stance for more or less white.  And, even having intelligent terms for what and how the “negative” space is actually “positive” for design.

    Most excellent article!

    Copy & paste the code below to embed this comment.
  31. We all needed this article, as whitespace is often even a matter of conflict with clients as they never want any space in their design to be “wasted”.
    Some of them should read this.

    Excellent!

    Copy & paste the code below to embed this comment.
  32. This is a really interesting article, Mark.

    I was quite interested in your comment that direct mailings actually NEED to look downmarket.

    Copy & paste the code below to embed this comment.
  33. We all need some space, don’t we?

    Copy & paste the code below to embed this comment.
  34. I enjoyed this article. I became aware of just how important whitespace can be when I began maintaining a brand standards website for a Fortune 500 Company. They have very strict rules governing whitespace in their print media and websites, and I have seen how much of a design impact whitespace can have.

    Copy & paste the code below to embed this comment.
  35. An extremely useful article, all the better for using great examples.

    Two things jarred me though, and thus illustrated another great impediment to good web pages:

    (1) The sentence right at the beginning “But for just about everything else, my client couldn’t have been further than the truth.”—should be “from the truth”.  This tripped up my little brain, and stopped the flow for quite a few seconds.

    (2) Mark—who is from the UK—has used the American spelling “practice” for the verb [in “Practice, Practice, Practice”]. Fair enough, since this is an American site.  But as a fairly literate British person, this not only tripped me up, but upset me: “not only is he using it wrongly, he’s promoting mis-use by others [from the UK]” is the refrain at the back of my mind.

    All of which means to say: even the best writing coupled with the best design, can be swept off-course—not to say torpedoed completely—if it’s not proof-read well. This is best done by a close colleague (because the author will never pick up all the errors and all the typos, after reading through his/her own text more than a couple of times).

    Thanks again: great article.

    Copy & paste the code below to embed this comment.
  36. I’ve been working on a redesign for my website, and one of the main issues i’ve encountered is balancing the content with whitespace.

    I’ve changed the default font color to be lighter, opened up some margins and the header, and generally left the site out in the breeze to “fluff” a bit…. The results have been great, and I look forward to the grand opening.

    As others have posted, I have found the book The Elements of Typographic Design to be invaluable in understanding type not only based on it’s character, but on it’s background historically.

    Thanks for the great article.

    Copy & paste the code below to embed this comment.
  37. The article is quite good. I think it was a good choice to discuss this topic “whitespace”. I have never seen an article about it so far. But it’s obviously an important factor to consider when you write a text. The right space between line increases the readability of a text a lot.

    Copy & paste the code below to embed this comment.
  38. Never even heard of Whitespace before reading your article but am glad I know about it now and how to use it effectively thanks to the great article your written.

    Copy & paste the code below to embed this comment.
  39. aptly put, wonderfully explained!

    thanks

    Copy & paste the code below to embed this comment.
  40. A excellent article, very useful.

    Copy & paste the code below to embed this comment.
  41. This is very helpful! It’ll greatly improve my ability to try to explain this stuff to clients.

    Copy & paste the code below to embed this comment.
  42. This is a subject I am always talking to students about in my desktop publishing, yearbook, and Web design courses. I plan on having them read your article to reinforce my message. Also the illustrations will be great as a visual representation on the importance of white space. Thank you!

    Copy & paste the code below to embed this comment.
  43. I’m a little late finding this article but found it very interesting. 

    I was especially surprised to find that people actively want their designs to look cheap. Up until now, I’ve always tried to make things look as ‘luxurious’ as possible.  Thinking about it, it makes sense – if your main sales pitch is that your product’s low cost, you want people to immediately think of it as such. I’m sure I’ll be able to use this insight in the future.

    Thanks for a great article.

    Copy & paste the code below to embed this comment.
  44. I’ve found that, while some advertisers recognize that white space can be a good thing, and others can be convinced, the majority see that whiteness merely as wasted money. Perhaps this article can help convince a few of the more stubborn ones…

    Copy & paste the code below to embed this comment.
  45. This is a topic that has been not talked about as much as it is needed. Great Job.

    Copy & paste the code below to embed this comment.
  46. Follow the link to find out the article’s Russian version:
    http://makskomaju.wordpress.com/2007/07/15/znachenie-vozduha-dlya-vospriyatiya/

    Copy & paste the code below to embed this comment.
  47. Great article. As one commenter said, whitespace is not often discussed yet is very important and can make things look bad when there is too much or not enough of it. Cheers Beth.

    Copy & paste the code below to embed this comment.
  48. A excellent article, very useful.

    Copy & paste the code below to embed this comment.
  49. A lovely little article which reminds me of the first book I read on print and design way back in the 1980s — the Designer’s Handbook. Whilst your examples are aesthetically pleasing sometimes the guidelines are cast away and dictated by the product and the audience, the desire for a masculine as apposed to a feminine approach.
    Two campaigns I’ve been involved in illustrated this very well, selling car insurance to the elderly and builders merchants advertising. Neither were particularly cheap, both were very legible and yet flew in the face of good design, layout and spacial awareness.
    In response to the points of Direct Marketing one has to consider the short timescale given before it makes it journey to the bin/trashcan. Get the message across asap! But it doesn’t necessarily mean cheap as many gold credit card campaigns will testify to.

    Copy & paste the code below to embed this comment.
  50. Wow, it is a great and very informative article, thanks dude.

    Copy & paste the code below to embed this comment.
  51. I’m printing this out to post in our office. Great examples and great points. Thank you.

    Copy & paste the code below to embed this comment.
  52. Great and informative article. I am a developer at a data based marketing firm whose bulk business comes from our in-house PURl application. We run small to large campagins with personalized cards and landing pages, and our staff is often in charge of designing the cards and landing pages for our clients. Our response rates from split testing with clients reluctant to go a new, cleaner design route only underline the efficacy of the approach…less is more. Everything is an ROI decision in direct mail – the message can easily get lost under a pile of lukewarm incentives and “waterbed warehouse clearance sale” type zany graphics…the flashing gifs of the print world.  Our stuff won’t win design awards, but it sure performs. It all comes down to clear message and good data.

    We have 4 seconds (a general figure, I would have to find my source again to confirm) to grab attention and make an impression with a web page – we have 1.5 seconds with print, and people tend to read only 1 in 8 words when they skim. The message is clear: choose wisely.

    Your site is gorgeous and appears to be the representative of the direction web is going. Keep it up.

    Copy & paste the code below to embed this comment.
  53. It’s incredibly useful, I knew how to use whitespace for the layout, but now I truly understand it :O .
    Thank you!

    Copy & paste the code below to embed this comment.
  54. This article helped convince our clients to be more open minded, thanks so much. Whitespace is the essence of design.

    Copy & paste the code below to embed this comment.
  55. you forget to realise the importance of space in a design when clients are making you use any free space to shove a banner ad in.

    Copy & paste the code below to embed this comment.
  56. I love designing upmarket Websites, sometimes it is more challenging as you have to think more carefully about the position, the size, the spacing, and the content. But having whitespace, and being able to use it well, can create and transform something completely, and really make it look the part. I have been a web designer for over 2 years now, and since my first website, have come a long long way. Its definately all about less is more in upmarket web design.

    Copy & paste the code below to embed this comment.
  57. Interesting how this common view of whitespace as somehow conveying sophistication and an upmarket sensibility is inverted in the case of for example Tescos’ Value range. Plenty of white space = dirt cheap baked beans?

    Whitespace is a natural by-product of good typography and information prioritisation. Design that deliberately sets out to use white space is never that successful in my opinion and can suffer from a lack of integrity.

    Copy & paste the code below to embed this comment.
  58. I constantly battle to balance usability and design, and hate clutter. Thanks for a useful and interesting article.

    Copy & paste the code below to embed this comment.