White Space: How to Get it ‘Right’

Space is important in layout. Space can be created by content, such as text, images, lists, logos etc, or it can be created by the space in-between content, called negative space, or whitespace. Space can be passive; a by-product of the layout process. Or, it can be active; there for a reason, to guide the user’s eye, or help them make a decision.

Shapes are elements that can communicate ideas, for example, the BP logo. Unusual shapes can attract attention, whilst conventional shapes when combined with colour convey meaning. Take a red triangle for example. From computer software, to road traffic signs, a red triangle means warning. Something’s wrong. Whereas a green circle, means everything’s good. Proceed.

In classical design, there are three types of shape: geometric, natural, and abstract. Geometric shapes are what you’d expect: circles, squares, triangles, rectangles and diamonds. Natural shapes are derived from what we see around us. Abstract shapes can be both representative impressionistic or they can be expressionistic. Like the art movements, impressionistic abstract shapes are meant to represent something else. Expressionistic shapes convey meaning, or emotion.

Shape and size are two of the basic elements of graphic design that determine space. If I change the shape of something, then I’m changing the space around it. If I increase the size of the shape, I decrease the space around it. Now, all of this is quite abstract at the moment. How can you apply this theory to your every day work? How will knowing the difference between abstract and geometric shapes make any difference to you? Well, it’s about learning how to look.

Throughout art school, then through design school, my lecturers and professors would encourage me to view things differently. To simplify my environment into shapes. To look at the space in-between things. To have an appreciation of shape, size, and tone. By looking at the world this way, you can start to understand the richness and complexity of design all around us.

Typographic Colour
Typographic colour refers to the density of type on a page – either a physical page, or on screen. The ‘shade’ of typographic colour can have an impact on legibility – too dark, with no typographic hierarchy, and your content will be difficult to read. Too light a shade of typographic colour, and your content will also be diffcult to read with readers finding it hard to read line to line. But there’s plenty you can do to make things easier for your readers. Let’s look at some examples of dark typographic colour:

The first paragraph here is set in Helvetica. Clearly, the leading or line height is set too small. The second paragraph uses correct leading but italic, serif typefaces generally have letterforms set too closely together.

To correct these two paragraphs, we need to add more leading to the first, and add some letter-spacing to the last. But remember, don’t add too much. Type designers have carefully crafted the distances between letterforms. To disrupt that distance is to tamper with the very ‘feel’ of the typeface, and can have disastrous consequences.

Now, let’s look at some examples of light typographic colour:

Using the same typefaces as before, this example shows that by setting a paragraph with too much leading, or too much letter spacing, can also result in an uncomfortable reading experience. Typefaces themselves can also have a bearing on typographic colour. Some typefaces have wide, open counters, and large spaces between the letterforms, (called kerns). Whilst others have tight counters, with minimal open space in the letterforms. Even the choice of typeface can play a significant role in the typographic colour of your final design.

White Space
My first design job was based in a small studio in Manchester city centre in the UK. It was mostly a print design agency that produced work for various large and small clients alike, in varying media: packaging, publications, marketing support material etc. One of the avenues of output for the studio was direct mail.

Designing for Direct Mail is actually quite tricky, for one simple reason: it goes against the fairly sophisticated graphic design principles, which is standard fare in college. Instead, designing direct mail is about as sophisticated as a small lump of concrete. Direct mail clients want to appear down market, there is no getting away from the fact that it works as well: big, bold and brash design is the order of the day. And in the words of one client, words that I will never forget as long as I’m a practicing graphic designer; ‘white space is empty space’. However, for the most part, he couldn’t have been further from the truth.

Definition white, or negative space is the space in-between elements in a composition; be that a web page, a web app or a spread in a magazine. Actually, that’s only a part truth. The space between major elements in a composition is micro white space. Micro white space, is, yes you’ve guessed it, the white space between elements such as list items, the space between a caption and an image, or the space between words and letters.

Legibility

A while ago I was lucky enough to go and see Erik Spiekermann give a lecture. Part of his talk was about his redesign of The Economist magazine. He mentioned that one of the primary reasons for the redesign was that the Economist thought their design was too heavy. The content was difficult to read. In newspaper design, which has so many parallels with web design, information is dense. Sometimes, as in web design, it’s difficult to add white space because the content makes it hard to do so. Newspapers often deal with this by using a typeface for the body, which is quite light and has plenty of white space within, and around, the characters. This was part of Erik’s solution for the redesign of the Economist. He redesigned the typeface slightly, whilst retaining the quirkiness of the original. He added more whitespace to the individual characters. He set the type slightly smaller I believe, with more leading. All of this was adding micro white space to the design. The overall result was subtle. The content was more legible and the overall feeling of the magazine was lighter, yet there was still the same amount of content.

I learnt from Erik that day that, in order to achieve a lightness and an increase in legibility in a design, and this especially applies to the web, you don’t have to look at the design at a macro level. Looking at the space between the tiny stuff, at the micro level, can have a big impact on the effectiveness of a design.

White Space Helps Position Brands

For years, designers have been using White Space in their designs to create a feeling of sophistication for upscale brands. This is where the Direct Mail client was actually correct in his view on white space for his product; adding white space to his design would position his product more upscale than it was. Coupled with a sensitive use of typography and photography, a careful use of White Space is seen all over certain brand markets to align themselves with their competitors. Take cosmetics for example, in fact most luxury goods, use white space in their marketing material to ‘tell’ the reader that they are sophisticated, of high quality and generally expensive. The opposite can be said of most Direct Mail you get through your letterbox; Red, white and black, bold typography and very little white space. The result is a down-market impression.

The content is the same on both designs, as are the elements such as photography. The design elements differ however, to create two designs which are at opposite ends of the brand spectrum. Of course, this is a very simplified view of the world and there’s a lot more that goes into brand recognition than simply White Space. But what I’m trying to get at is if a brief lands on your desk for a luxury brand, I’ll bet the client and audience of that product expects white space in their marketing material and plenty of it to align it with their competitors.

Active and Passive White Space

White Space is often used to create a balanced, harmonious layout. One that just ‘feels’ right. It can also be used to 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 o! the centre of the frame and having them looking into the remaining space, a designer can do this to increase the effectiveness of their design. Another way of looking at white space is by how a reader, or user, reacts to it. White space can not only be used by the designer to create harmony and balance in design, or to help position a brand, but it can be used to lead a reader from one element to another. This is called Active White Space. Let’s take the following example before any active white space is applied.

So, everything is pretty cramped here. We then need to add some white space to create the harmony and visual comfort in the design. Here, I’m adding margins, changing the type family and weight and also adding some leading, (or line-height as it’s also known).

The white space that has been added here is passive white space. There is a theory that passive white space is white space that is present within a composition that is unconsidered. I disagree: that’s just bad design. Passive white space still has an important job to do; it’s there to create breathing room and balance. Now, within this content is something that I want the reader to see, the second quote. I could highlight it with a different colour or make the type size larger. I could do all of those at the same time. In this instance however, I’ve added white space around the element to draw the users eye, in addition to reducing the white space of the type, not the tracking, but actually making the type bold. This is active white space. White space that is added to a composition to better emphasise or structure information.

Practice, Practice, Practice
Sometimes, the only way to get to grips with a concept that can be as arbitrary and subjective as white space, is to practice. In the same way martial artists have to spend hours upon hours of drilling simple techniques, graphic designers have to do the same. For many designers, this part of the craft is all but forgotten once you leave high school and replaced with classes on lateral thinking and design history. Working under the pressure of real clients demanding real work leaves little room for the time needed for these design ‘drills’. If you do find yourself with a spare hour or two though, I have a great place to start. Graphic design students have conducted these types of compositional exercises for decades and luckily for us, some of the design legends of past years have documented the process.

One of my favourites has to be Emil Ruder. Emil Ruder was a Swiss typographer who died in 1970. After 21 years of teaching typography, he produced a book called
‘Typography: A Design Manual’ (ISBN: 3 7212 0043 8).

‘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.’

So, in that sense, Ruder’s teachings are fairly black and white. There is 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. There are some great exercises in there covering not only white space, but also other compositional devices. It’s chock-a-block with drills. It’s expensive, but I urge you to buy this book and follow the examples. White Space is not about the space in between things; the space ‘left over’. Knowing how to design and manipulate the space outside, in and around your content will not only give your readers a head start, or your product the right market positioning, but will perhaps make you see your content in a new light.

Free Workshops

Watch one of our expert, full-length teaching videos. Choose from HTML, CSS or WordPress.

Start Learning

Treehouse

Our mission is to bring affordable Technology education to people everywhere, in order to help them achieve their dreams and change the world.

Comments

122 comments on “White Space: How to Get it ‘Right’

  1. I have always enjoyed the white space / luxury example ever since seeing it on A List Apart. It is an easy way to get clients to understand the significance and impact of properly using white space.Thanks for the great read!

  2. I have always enjoyed the white space / luxury example ever since seeing it on A List Apart. It is an easy way to get clients to understand the significance and impact of properly using white space.

    Thanks for the great read!

  3. Thanks for focusing on the importance of white space as relates to typography. A lot of the advice I've seen has concentrated on space between sections in web design. While I've always been a fan of more minimal approaches to design, it wasn't until I started addressing typographical issues more that I got the kind of results that really pleased me.One thing that I have noticed is that often the more minimal a site and the better the overall use of white space, the less accessible the site is in terms of font size legibility. Smaller font sizes work best on a purely aesthetic level with minimal designs, but larger fonts can sometimes look out of place. It's a question I've been pondering in related to my own site specifically, but do you think it's the case more widely?

  4. Thanks for focusing on the importance of white space as relates to typography. A lot of the advice I've seen has concentrated on space between sections in web design. While I've always been a fan of more minimal approaches to design, it wasn't until I started addressing typographical issues more that I got the kind of results that really pleased me.

    One thing that I have noticed is that often the more minimal a site and the better the overall use of white space, the less accessible the site is in terms of font size legibility. Smaller font sizes work best on a purely aesthetic level with minimal designs, but larger fonts can sometimes look out of place. It's a question I've been pondering in related to my own site specifically, but do you think it's the case more widely?

  5. Excellent use of an article regarding Australia beating England in the Ashes, cant wait for the Aussies to do it all again this year. =)Oh and white space is nice too, thanks Mark.

  6. Excellent use of an article regarding Australia beating England in the Ashes, cant wait for the Aussies to do it all again this year. =)

    Oh and white space is nice too, thanks Mark.

  7. A nice article which really needed proof-reading and editing before it was published.

  8. The “Ponting Defends…” example, I would try changing it to athrre columns. I find all that queer shaped white space unattractive and the long lines hard to read. May be two columns.

  9. I never though that it is that important for white space but now I know it very important thanks useful information.

  10. White space is very effective. Makes things legible and as you said improves brand visibility. Thanks for this useful post! Practice is the keyword over here.

  11. The face mask graphic says it all. What a great article. I think that, with simplicity becoming the newest trend, this can help designers ease into the transition.

  12. Good article on a topic that isn't discussed enough. I'm finding that lots of fresh designers know how to make great designs, but entirely miss giving their design (especially text) room to breathe.@Mark Boulton I nearly didn't read it though because of the giant errors in the opening paragraph. Take a look at the difference between a hyphen, em, and en dash. You are incorrectly using em-dashes.

  13. Good article on a topic that isn't discussed enough. I'm finding that lots of fresh designers know how to make great designs, but entirely miss giving their design (especially text) room to breathe.

    @Mark Boulton I nearly didn't read it though because of the giant errors in the opening paragraph. Take a look at the difference between a hyphen, em, and en dash. You are incorrectly using em-dashes.

  14. Very nice piece. You found a great example ad to explain less space=cheap vs. more space=luxury. I'm hoping the errors in the first paragraph are blunders in transferring the text itself. Like @Dan, I was turned off immediately.

  15. Very nice piece. You found a great example ad to explain less space=cheap vs. more space=luxury.

    I'm hoping the errors in the first paragraph are blunders in transferring the text itself. Like @Dan, I was turned off immediately.

  16. Nice one indeed. For me, having had no graphic education, this article explains the basics quite nicely.

  17. Nice one indeed. For me, having had no graphic education, this article explains the basics quite nicely.

  18. Nice one indeed. For me, having had no graphic education, this article explains the basics quite nicely.

  19. What a truly inspiring post. I've learned so much in just a few minutes.From now on, I'll be considering white space in typography completely differently.Thank you Mark | I'm off to buy your book

  20. What a truly inspiring post. I've learned so much in just a few minutes.

    From now on, I'll be considering white space in typography completely differently.

    Thank you Mark | I'm off to buy your book

  21. Great examples of how to use White Space to really draw your visitor in. A lot of times when I don't use white space my visitors get lost. I suggest trying crazyegg and see what your visitors do on your site, then modify it to fit what they want to do.

  22. Great examples of how to use White Space to really draw your visitor in. A lot of times when I don't use white space my visitors get lost. I suggest trying crazyegg and see what your visitors do on your site, then modify it to fit what they want to do.

  23. Wow.. Thank you for this article.. It really is informative.. Even a person who is not so much familiar with this kind of stuff, like me, was able to understand.. Better start practicing..! Thanks again..

  24. Pingback: Software Quality Digest - 2009-03-30 | No bug left behind

  25. Pingback: links for 2009-03-31 | This Inspires Me

  26. Nice article, but there's a typo in paragraph 12, line 3. Shouldn't that be “The space between major elements in a composition is macro white space” =)

  27. Nice article, but there's a typo in paragraph 12, line 3. Shouldn't that be “The space between major elements in a composition is macro white space” =)

  28. And as well as space there's the juxtoposition of colors. The blue and white contrast in that shot so well that they emphasize the space

  29. And as well as space there's the juxtoposition of colors. The blue and white contrast in that shot so well that they emphasize the space

  30. White space has always been a hard concept for me to grasp when designing my websites. I mean its not hard to throw your site on a page and setup some borders but to do it right and make it work with the website, that is the hard part for me.

  31. Nice article…found it really interesting….I also liked the blog on twitter…thanks for letting me know that. I think white space plays a important role in logos too. If you have seen the YO! logo…i think you know what I am talking about

  32. Great, well thought out article. There are complete courses on how to use white space effectively to get your message across. Your article hit on some of the important points of aesthetics and marketing.

  33. Totally agrre. It's not just about the words on your page. It really is also about the WAY you display these words on your page. I am a firm believer in the use of white space in any article or post. It breaks things up a little, less eye strain, so more time spent on the page by visitors

  34. Totally agrre. It's not just about the words on your page. It really is also about the WAY you display these words on your page. I am a firm believer in the use of white space in any article or post. It breaks things up a little, less eye strain, so more time spent on the page by visitors

  35. One thing I would like to add to support your conclusion is all copywriters will talk about white space in their copy as being very important. Also, anyone that does any testing and tracking will tell you the same thing. Good read.VanT1 dedicated line

  36. One thing I would like to add to support your conclusion is all copywriters will talk about white space in their copy as being very important. Also, anyone that does any testing and tracking will tell you the same thing. Good read.

    Van
    T1 dedicated line

  37. Excellent article on white space and its various uses. The concept that whitespace could affect a comoany's brand image is new to me, lol.

  38. Exactly. As for the moment, I'm conquering adobe photoshop to design my site better. Anyway, this piece of theory is very helpful.

  39. Exactly. As for the moment, I'm conquering adobe photoshop to design my site better. Anyway, this piece of theory is very helpful.

  40. I never thought about “white space” before… but you ar eabsolutely right. White space is really importan tin design.

  41. I'm just beginning to break into the world of web content creation. This article held some very useful information, and I appreciate the pointers. Great job!

  42. I'm just beginning to break into the world of web content creation. This article held some very useful information, and I appreciate the pointers. Great job!

  43. This is a great topic to go into detail on. I consider myself an amateur web designer but I still get around. White is one of the things I over looked when I started doing it. I wish I would have found an article like this when I started out. Thanks for the great work!

  44. Pingback: Use of white space « Design Drops

    • Hi Nestor,

      Apologies about this. We’re currently fixing it and it should be sorted out soon.

      Best,
      Ryan

  45. It’s really great to post my comments on such a blog. I would like to appreciate the great work done by the web master and would like to tell everyone that they should post their interesting comments and should make this blog interesting. Once again I would like to say keep it up to blog owner!!!! great one

  46. informative not oninformative not only for graphic designers but for company owners like myself. It is always good to know how to increase the effectiveness of the graphic design or marketing materials you create.
    In the past, I used to be afraid of white ly for graphic designers but for company owners like myself. It is always good to know how to increase the effectiveness of the graphic design or marketing materials you create.
    In the past, I used to be afraid of white

  47. This is one of the best blog i have just seen, i am really feeling honor and pleasure that i am able to post my views here in this blog, a reall…

  48. the best blog i ha of the best blog i have just seen, i am really feeling honor and pleasure that i am able to post my views here in this blog, a ve just seen, i am really feeling honor and pleasure that i am able to post my views here in this bloasgasfeaefeweweqwre

  49. White is one of the things I over looked when I started doing it. I wish I would have found an article like this when I started out. Thanks for the great work!

  50. Gosh! I never thought that white space is useful. I always tend to fill up the whole picture with whatever I can insert just to wipe out the space. Thanks a lot for this.

  51. Pingback: Why whitespace matters, White Space: How to Get it ‘Right’ » Creative Verse

  52. Excellent post Mark.
    It is very informative not only for graphic designers but for company owners like myself. It is always good to know how to increase the effectiveness of the graphic design or marketing materials you create.
    In the past, I used to be afraid of white space thinking that I am missing out that I am leaving out important info not realising the damage it would do.

    Thanks for this great post.