My first design job was with a small print design agency in Manchester that produced work in varying media: packaging, publications, and marketing support materials, and…direct mail.
I soon discovered that the graphic design principles I’d learned in college were of little use when I designed for direct mail, where big, bold, and crowded is the order of the day. In the words of one client—words I will never forget—“whitespace is empty space.”
Direct-mail clients need their packages to look down-market, because it works for them. But for just about everything else, my client couldn’t have been further from the truth.
Meet whitespace#section2
“Whitespace,” or “negative space” is the space between elements in a composition. More specifically, the space between major elements in a composition is “macro whitespace.” Micro whitespace, is—yes, you’ve guessed it—the space between smaller elements: between list items, between a caption and an image, or between words and letters. The itty-bitty stuff.
So what does whitespace do?
Micro whitespace and legibility#section3
A couple of months ago, I was lucky enough to see Erik Spiekermann give a lecture. Part of his talk addressed his redesign of The Economist newspaper, which was partly motivated by the client’s realization that their design was too heavy and the content too difficult to read.
In newspaper design, information is dense. Sometimes, as in web design, it’s difficult to add whitespace because of content requirements. Newspapers often deal with this by setting their body content in a light typeface with plenty of whitespace within and around the characters. This was part of Spiekermann’s solution for the 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.
Brand positioning#section4
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.
My old direct-mail client was correct in his assessment of whitespace for his particular product, because direct-mail packages need to appear down-market to work—and adding whitespace to his design would have lent his package an undesirably upscale quality. Take the following example.
Figure 3. Examples of direct mail vs. luxury brand design
The content is the same on both designs, as are the other elements, such as photography. Yet the two designs stand at opposite ends of the brand spectrum. Less whitespace = cheap; more whitespace = luxury.
A lot more goes into brand positioning than just whitespace, but as a brief lands on your desk for a luxury brand, it’s very likely that the client—and their target audience—expects whitespace and plenty of it to align the product with its competitors.
Active and passive whitespace#section5
Whitespace is often used to create a balanced, harmonious layout. One that just “feels” right. It can also take the reader on a journey through the design in the same way a photographer leaves “looking room” in a portrait shot by positioning the subject off the center of the frame and having them looking into the remaining space. When whitespace is used to lead a reader from one element to another, it’s called “active whitespace.”
Let’s take the following example before any active whitespace is applied:
Figure 4. Text before whitespace is added
Everything is pretty cramped. We need to add whitespace to create harmony and visual comfort in the design. First, I add margins, change the type family and weight, and also increase the leading (or line-height, as it’s known in CSS). This is all “passive whitespace.”
Figure 5. Text with passive whitespace added
Some might argue that passive whitespace is the unconsidered space present within a composition. I disagree: if you don’t consider all your whitespace, that’s just bad design. Passive whitespace creates breathing room and balance. It’s important.
We’re not done yet, though. Within this content is something that I want the reader to pay extra attention to: the second quote. I could highlight this element with a different color or make the type size larger, but in this instance, I’ve simply added macro whitespace around the element to draw the user’s eye, then reduced the micro whitespace within the type by making it bold.
Figure 6. After active whitespace has been added
This is active whitespace—whitespace added to a composition to better emphasize or structure, information.
Practice, practice, practice#section6
The only way to come to grips with a concept as subjective as whitespace is to practice. In the same way martial artists have to spend hours upon hours drilling simple techniques, graphic designers have to do the same. Compositional exercises have been conducted by graphic design students for decades and, luckily for us, some of the design legends of past years have documented the process. Emil Ruder is one of my favorites.
Ruder was a Swiss typographer who died in 1970. After 21 years of teaching typography, he produced a book called Typography: A Design Manual, in which he states:
The book is deliberately restricted to pure typography, to working with prefabricated types which are subordinated to a precise system of measurements. Its purpose is to make apparent the laws of typography and—in spite of certain common features—the contrast between it and graphic design which in both the selection and means of their application, is freer and more complex.
Ruder’s teachings are fairly black and white, with a focus on typography and the subtlety of designing with letterforms. Ruder takes you through the rights and wrongs, which is a great place to start learning the fundamental principles of composition. The book is chock-a-block with great exercises covering whitespace and other compositional devices. It’s expensive, but well worth the price.
Once you know how to design and manipulate the space outside, inside, and around your content, you’ll be able to give your readers a head start, position products more precisely, and perhaps even begin to see your own content in a new light.
Excellent article on an often overlooked topic!
Just a heads-up: I believe you meant *economist.com* instead of theeconomist.com (: The former goes to the newspaper.
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.
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.
While The Economist refers to itself as a “newspaper”, it is misleading in this context given the published form is that of a magazine.
Great article, thanks.
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.
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!
A great article! Handy when yet another client wants his whole brochure cramped in a small add. I will just let them read this =)
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.
Ruder, Spiekermann, Bringhurst…
Good to see the work of some quality typographers getting metions.
Good job Mark, nice article.
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.
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.
Yep! A great discussion on this oft-overlooked topic!
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.
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.
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.
.. 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!
bq. 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.
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.
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.
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.
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?
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
Thank you for sharing. You made our day.
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._
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.
Practical, useful knowledge applied to real-world examples in an interesting way. For me that’s what ALA is all about. Great article.
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!
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!
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!
This is a really interesting article, Mark.
I was quite interested in your comment that direct mailings actually NEED to look downmarket.
We all need some space, don’t we?
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.
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.
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.
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.
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.
aptly put, wonderfully explained!
thanks
A excellent article, very useful.
This is very helpful! It’ll greatly improve my ability to try to explain this stuff to clients.
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!
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.
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…
This is a topic that has been not talked about as much as it is needed. Great Job.
Follow the link to find out the article’s Russian version:
http://makskomaju.wordpress.com/2007/07/15/znachenie-vozduha-dlya-vospriyatiya/
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.
A excellent article, very useful.
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.
Wow, it is a great and very informative article, thanks dude.
I’m printing this out to post in our office. Great examples and great points. Thank you.
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.
It’s incredibly useful, I knew how to use whitespace for the layout, but now I truly understand it :O .
Thank you!
This article helped convince our clients to be more open minded, thanks so much. Whitespace is the essence of design.
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.
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.
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.
I constantly battle to balance usability and design, and hate clutter. Thanks for a useful and interesting article.