January 5, 2006

Under The Loupe #1: White Space

Under The Loupe is a new bi-weekly feature I’m starting here where I will focus on a small technique, detail, or building block of well-formed and well-informed design. Some things you may already know and some you may not, either way, I enjoy talking about design and I still feel there is more need for design-related writing online. This is the first of two new features here, the other will come later this month if all goes well. Anyway, on to Under the Loupe. First up: white space.

White space specifically refers to the space between letters and words, though, more generally for common use, can also mean any empty space residing in a layout (margins, leading, letter-spacing, etc). The term “white space” is typically interchangeable with “negative space” as well, and as such bears no real connection to the actual color white.

When white space is used appropriately, it allows a page to create a general flow and balance, which in turn helps communicate the intent of the design by welcoming readers and inviting them to stay awhile. White space can highlight important elements and support the overall hierarchy, leading the viewer around the page by the designer’s intent. The empty space on a page can be every bit as important as the space occupied by imagery, because even empty space serves a purpose and supports the visual integrity of a layout.

This can be a tough thing to explain to a client that can only see it as space that could be occupied by another banner ad or photo. But there is something to be said for presenting your information succinctly rather than filling every corner. Lack of white space puts a strain on the reader’s eyes and their patience. Little or no negative space is the reading equivalent of a skipping record; most people won’t sit around until the end. Skilled designers can do as much with white space as others can do with photos, creating new shapes and letterforms from emptiness.

Legibility is a big concern, especially online where designers have to contend with a variety of different browsers, platforms and screen resolutions. Sometimes it’s better to err on the side of safety then leave your visitors stranded with a site that smacks them in the face when they try read it. Here is a quick example to show how some simple padding and leading can improve legibility (and hopefully visitor motivation) when reading. I don’t know about you, but I have no desire to read the text on the left. Something like that would make me want to leave a site faster than a Flash intro. The column on the right will at least get me reading… after that it’s up to the writing to keep me there.

Some more examples of successful use of white space:

Commentary (27):

1. Ian says… jan 5, 2006 | 10:34 am

If I had to make a white space analogy it’d be the one about going over that dude’s house who has every inch of his living room crammed with old computers and monitors and guitars and so much shit that you can’t even walk around. That, or breathing room.
I’ve heard someone say that some scammo credit card offers (or the like) place their terms and conditions in such an unreadable situation because they don’t want their terms to be read.

2. Dan Mall says… jan 5, 2006 | 10:35 am

Make you leave a site faster than a Flash intro? No, that can’t be right…

3. Glen says… jan 5, 2006 | 11:06 am

And, of course, don’t forget that lack of white space leads to a tension and conflict in the eye that will inevitably lead to confusion and a dislike of a site.

4. Marlun says… jan 5, 2006 | 12:41 pm

I agree, theres a lot of websites/blogs out there which could be improved with some white space. I try to read all of their content through my feed reader and thats no good for them.

5. Wade Winningham says… jan 5, 2006 | 1:02 pm

It’s sometimes tough for people, especially marketing people, to leave white space alone. “That space should have some promotional item in it. Better yet, can it expand to take up the entire page if you mouse over it?”

They also want everything above the fold. It drives me nuts when their marketing genius drives the primary content, which is the entire point of the page, to a point where 75% of your users need to scroll to get to it.

I’m not saying all marketing people are like this. I’d love to hear a story from someone who had a favorable experience with one.

6. Giorgio Martini says… jan 5, 2006 | 3:17 pm

In your white space example—the right column—wouldn’t you leave some more space between the heading and the first paragraph?

p.s. looking foward to #2, 3, 4… :-)

7. Ian says… jan 5, 2006 | 3:42 pm

Wade: For situations like this, you should keep two popular magazines near your desk: Star and Rollingstone.
You know what to do…

8. Jason Santa Maria says… jan 5, 2006 | 3:50 pm

Giorgio Martini: I wouldn’t, no, but some of this depends on personal preference. Basically, the more color a font has (font color meaning density of letter, not actual color) the more space it needs to be legible. In the case of headings, I think the most important thing is to distinguish hierarchy, which the large text header in the example does. After that, as long as the text isn’t sitting on the line below it, I think it’s a-ok. (one caveat: you could be seeing something I didn’t intend on a browser/platform I didn’t have access to, in which case it might be horribly wrong after all.)

9. Hercules Papatheodorou says… jan 5, 2006 | 5:09 pm

Fear of “white space” is what we call fear of the blank or void. One should not think of it as “negative space�?. You should rather try and give shape and form to the white space too, in art there’s no foreground and background.

10. Maxine says… jan 5, 2006 | 5:28 pm

Great subject for the first in your series Jason. I’m not a designer at all myself, but I remember the light really coming on for me about whitespace when I saw Doug Bowman speak about his Blogger redesign at WE04.

I thought this article here had a great perspective on white space. Very inspirational, though I’m not sure how useful it would be in that situation where the client wants to fill your beautifully crafted white space with banner ads.……”if you have to ask, you’ll never know”?

Don’t get me wrong, I’m not some sort of fangirl, but I adore the courage captured by those photos of Steve Jobs in front of that giant empty screen.

11. Dan Boland says… jan 5, 2006 | 6:09 pm

It’s amazing what a little white space can do for a layout. It’s also amazing how many people don’t seem to understand that.

12. Tom says… jan 5, 2006 | 6:14 pm

Great links at the end - esp. the Russian Avant Garde site and the Saul Bass reference - thanks!

13. BG McCollum says… jan 5, 2006 | 6:51 pm

Hi Dan!

14. Rick Holmes says… jan 5, 2006 | 8:00 pm

As the advertising manager of the newspaper where I worked years ago used to say, white space sells. He had the right idea.

15. Matt J says… jan 5, 2006 | 8:16 pm

Nice start to the new year Jason! Love it!

16. Phil L says… jan 5, 2006 | 9:57 pm

I run into the problem of clients and white space all the time. It comes up a lot with Web apps and forms, with clients sometimes asking/demanding that the nice usable one-column form be put into two, three or how ever many columns we can squeeze on the screen to use that “wasted space”.

My answer is usually to tell them that they don’t have to pay for those pixels and just by scrolling you get a whole screen full of fresh free pixels. Okay, joking that isn’t what I tell them…but I certainly think it.

17. Paul V says… jan 6, 2006 | 1:26 am

Absolutely, Jason! Thanks for reiterating what is probably the single most important element of design.

God, I even make sure my plain text emails have enough space!

18. Peter Asquith says… jan 6, 2006 | 5:37 am

… So, what you’re saying is; white can be any colour you like and colour isn’t really colour after all …

Seriously, an excellent topic and a tricky one to carry off well when designing for a multi-browser, accessible Web.

Looking forward to your next installment.

19. Joseph Wain says… jan 7, 2006 | 6:24 pm

Jason – 

Just have to say that “In the Loupe” would’ve been a much more clever title. ;)

20. Jason Santa Maria says… jan 7, 2006 | 6:59 pm

Joseph: That’s what Kevin said too, but I’m sticking to my guns, I like “Under” because I want it to be about scrutiny of the small details as well as understanding the parts that make up the whole. I think either would be good, but I still favor Under :D

21. Steve says… jan 8, 2006 | 8:28 am

Working on an intranet application (which to give them credit is an update from a legacy system with a terrible design) we have a client who’s always talking about cramming massive amounts of data onto a single non-scrolling page. Are there any more tips on how to convince them how much it fries a users (or my) brain?

22. coudal says… jan 9, 2006 | 3:27 pm

If anyone needs some, we have a bunch a surplus white-space laying around the studio. It was left over from a couple recent client jobs…

23. josh says… jan 9, 2006 | 3:47 pm

Great article. Whitespace is important in any design. Not just for readability but also for “viewability”. Most clients I deal with want the page packed with information, but they are never really concerned with the readability of the page to the user.

Only thing I have been able to do to move the client away from the packed to the brim page design is to show them examples and explain the need and reason for the whitespace. Otherwise just shove it down their throat until the understand, but nicely. :)

24. Nick Whitmoyer says… jan 10, 2006 | 12:56 pm

White space is a beautiful thing.

Another designer who deserves recognition for the use of white space would be Helmut Krone.

25. Giorgio Martini says… jan 12, 2006 | 10:17 am

A tad late…

I wouldn’t, no, but some of this depends on personal preference. Basically, the more color a font has (font color meaning density of letter, not actual color) the more space it needs to be legible. In the case of headings, I think the most important thing is to distinguish hierarchy, which the large text header in the example does. After that, as long as the text isn’t sitting on the line below it, I think it’s a-ok.

Good points, absolutely. However, my personal preference says that there should be more spacing between the header and the first paragraph than between the first paragraph and the second. :-)

(one caveat: you could be seeing something I didn’t intend on a browser/platform I didn’t have access to, in which case it might be horribly wrong after all.)

Safari, OS X (double checked on Firefox too).

26. Chris J says… jan 14, 2006 | 7:55 am

Hi, I am desperately trying to improve my visual design skills in web dev, I can do all the techie stuff, and I understand how to build compliant sites, but when it comes to visual design I am pretty poor.

So I will be definitly reading this feature regulary!

Good job on the article, I like your writing style

I look forward to the next one

27. Billy says… mar 21, 2006 | 5:51 am

White space is essential.

It’s the visual version of the silence between the songs on an album - just as (if not more) important as the thing it sorrounds…