How To Use Space In Design

…there’s gotta be enough space in there (between notes) so that the sound will work in an air space. That’s what makes the music work.
Frank Zappa

Without space there is no music. Try to imagine every note playing at the same time or being played so quickly that there’s no distinction between one note and the next. You wouldn’t have music. You’d have a solid wall of noise. As Zappa said, “There’s gotta be enough space in there.” You have to leave room for the sounds to be distinguished from each other, to be heard for what they are.

A few notes played together form a chord. All notes played together form noise. To create rhythm and melody requires a measured and planned space. Music isn’t sound. It’s a balance between sound and space. Without both there is no music.

The same is true visually. There’s gotta be enough space. Without whitespace none of your elements gets seen. They become noise.

M.C. Escher's Sky and Water I, 1938

What Does Space Do in Design?

Space can be used to both separate and connect elements in a design. Wider spaces separate elements from each other and narrower spaces connect elements to reveal relationships between them. Overlapping elements maximizes their relationship.

By controlling and shaping space in our designs, we create rhythm, direction, and motion. We create design flow through our use of space.

Whitespace does three main things in a design.

  1. Creates groupings of elements
  2. Creates emphasis and hierarchy
  3. Improves legibility

Consistent use of white space across pages connects those pages. Space is layout. When the space in boilerplate elements remains the same your visitors don’t get disoriented. Your navigation stays in the same location. Your logo is in the same spot on every page.

You can also show difference. Sections within your site can maintain consistent space within the section and differ from other sections. As long as the boilerplate remains consistent it’s apparent the site is the same.

Consistent use of negative space is a hallmark of professional design. Look at any design that strikes you as amateur. I can almost guarantee little thought will have been given to the space within the design.

If you arrange white space well your elements fall into place and look great, but if you only arrange the positive elements, your white space will most always be ineffective.

Whitespace gives a place for the eye to rest, which it needs in order to absorb the message you’re trying to communicate. It’s a visual cue that there’s a break in the content or that the content is finished. Whitespace makes your page and site easier to navigate.

Space can be used to convey a variety of meanings, some of which include

  • quality – wealth, luxury
  • solitude – abandonment, loneliness
  • cleanliness – bleached, washed
  • purity – unsullied, unadulterated
  • spirituality – sacredness, connection to something greater
  • openness – distance, infinity
  • calmness – placidity, inaction

Negative space can be active or passive. When the space in a design is symmetrically balanced the space becomes passive. It’s static and formal and for the most part boring. When negative space is asymmetrically balanced it becomes active. It’s dynamic and modern and interesting.

circles of different sizes surrounded by whitespace

How to Use Space in Design

Space in web design can be divided into to types.

  1. Micro whitespace – is the space within elements, such as the margins surrounding text and the leading between lines of text or the spaces between the individual characters.
  2. Macro whitespace – is the space between major elements in your design. These spaces tend to be larger and are usually immediately apparent

Micro Whitespace

Micro whitespace is concerned with spaces between smaller elements. It’s space between list items and space between an image and its caption. It also includes the space between elements inside a larger element. For example you might have 2 images in your sidebar that sit next to each other or a search box and a search button in a form.

Much of micro whitespace will take place in your typography. I’ve written recently about legibility and readability in typographic design as well as offering thoughts on building a typographic stylesheet and I’ll direct you there to more details.

Suffice it to say your use of space in typography plays a huge role in how legible and readable your text is. One of your main concerns will be setting the leading or linespacing which will help determine typographic color and is used to set a vertical rhythm in your text.

Macro Whitespace

Earlier I mentioned that space is used to separate and connect elements. Boxes (borders and backgrounds) are often used to enclose and connect some elements while separating them from other elements or groups of elements. Boxes can be overkill. Yes, they work well at separating things, but they do it too well and can sometimes harm the overall unity of the page.

Space can be used instead of boxes to separate and connect. Again wider spaces separate and in comparison narrower spaces will connect. Space can be a better way to separate elements while still maintaining unity across your design.

Negative space can be used to give emphasis to elements. Those placed within or near large blocks of space gain importance by their separation from other elements. They naturally stand out in a field of empty space as well. Through emphasis we begin to create a visual hierarchy in our design.

Whitespace plays a role in many other design principles. It’s used to achieve balance, both symmetrical and asymmetrical. Space implies rhythm and movement. It’s the ground in the gestalt figure/ground relationship.

Space creates columns, rows, and grids.

Typographic information poster by holtzapple

Grids and Space

Grids are a way to organize space. By learning to use grid systems a designer is forced to think about whitespace and learn to shape it in designs. Grids become visible in part by the way elements align and also by the fields and paths of empty space that aren’t filled.

Grids encourage you to create more dynamic and asymmetrical compositions in which space is not only present, but flows through and around elements in your design.

Fixed and Fluid Layouts

When working in print the overall size of your page, the total space you get to manipulate is fixed. Not so on the web.

One reason you see many web designers opt for a fixed layout is because it fixes the working space of your design. It allows for less surprises in the whitespace. Currently it’s common to set the page width at 960px. This gives web designers more control over the horizontal space, since one aspect of the total space is fixed.

Often fixed layouts are centered within the browser window. This creates a passive (symmetrical) balance of space outside the page. Inside the 960px the designer is free to use either passive or active space.

We lose control of the overall space with fluid layouts. The more fluid your design, the less control you have over the total whitespace. This leads to new problems to solve in regards to space. Will every column in the design be fluid? If so how will the micro space in the column be managed as the column expands and contracts? Will some columns be fixed and if so how will the macro space between major elements be managed?

I can’t speak for you, but when I’ve come across completely fluid designs their major failing seems to be in how the whitespace changes at different browser sizes. What looks good and is easy to read at one width looks horrible and becomes difficult to read at another. For the most part I don’t think web designers have thought much about or at least solved this problem of the total canvas space changing. Hence the more common use of fixed layouts.

Blank cloth

Can You Have Too Much Whitespace?

You generally won’t hear many complaints about a design having too much whitespace. Many new to design will attempt to fill every last bit of space with color or graphics or content. More experienced designers will encourage you to use more space and not try to fill up every little bit. Again few people viewing a design will complain that it has too much whitespace.

Still there are times when it makes sense to fill more of the space. You have to consider both the content of the page and medium delivering the page.

Ecommerce sites are a good example of the former. There’s no reason why most pages in an ecommerce site can’t use ample space. However think about category and search pages, which are mostly a grid or list of products. Too much space can make it harder to compare one product with the next. That’s not to say you should fill all the space on these pages. Rather you need to think differently about it.

Micro whitespace takes on more importance to ensure that products and any information about them can be easily understood. You also need to make sure one product and it’s information can easily be differentiated from the next one. Overall though you would probably use a tighter grid with less space between elements (products)

A case where the medium takes on importance is design for mobile devices. Given the smaller screen sizes too much space could lead to a mostly or even completely empty screen requiring visitors to scroll to see anything. Again make use of micro whitespace for smaller screens, but be aware that large blocks of space may not work as well as you think. You have to carefully consider the smaller amounts of space you have to work with.

Information graphics are another case where less space in the content makes sense. More densely packed information allows readers to compare the data more quickly. You’ll want enough space so each bit of information can be clearly seen and discerned, but not so much that it makes it hard to compare and contrast them. Here you might opt for other ways to separate elements such as different colored backgrounds on rows or columns in a table.

Logos that make use of whitespace

Whitespace in Logos

One of the more fun ways to study whitespace is to see how it’s been applied in logos. I don’t have any specific thoughts to share in regards to whitespace in logos other than to say the principles above still apply. Mostly I thought I’d point you to a few posts that show a variety of logos where whitespace is not only used, but used in a way where it makes the logo what it is.

Enjoy

There are plenty more similar posts if you search and want to see more use of negative space in logos.

Summary

In his famous book on writing, The Elements of Style, William Strunk offers the phrase “omit needless words.” We can modify that for visual design as “omit needless elements.”

When designing a page think about what truly needs to be there. Omit everything else. Thinking about space will help you see what is and isn’t essential on the page. More than likely you can include less elements than you think in your design.

An interesting point system (<— scroll down to the bottom of the page) which I've seen a few times, is where a total amount of points is allocated to be distributed across all the elements on the page. You assign more points to the most important elements and less to the least important elements, thereby creating a hierarchy for your design.

In establishing this hierarchy you'll find that there are no points left for some elements, which should tell you they probably don't need to be included in the page. You'll need less elements, more whitespace, to give emphasis to your most important design elements.

Space is perhaps the most important tool for any visual designer. It plays a role in grids and typography and is a component of so many different design principles. When we learn to see space and learn to control it within our designs we elevate ourselves to a new level of design skill.

As you find designs you like take the time to study them, particularly in how they use whitespace. Learn how effective use of space can make or break a design and how controlling space in your designs can make them more interesting and communicate more effectively.

The Elements of Design Series

Download a free sample from my book, Design Fundamentals.

9 comments

  1. This is actually a really impressive article. I’m surprised that no one’s commented on this yet. You’ve got some great examples when it comes to using whitespace in design. I loved the article so much I wish you took it further with examples of whitespace on billboards as well as inside of main stream books and magazines. All and all this is a great article for beginning designers.

    Cheers.

    • Thanks Fred. I wish more people would comment, but there are probably a variety of reasons why there weren’t any comments here when you arrived. I’m thinking a big one is I write the posts to be so inclusive that they don’t always invite conversation. Something I’ll have to work on.

      Great idea about using billboards and books and magazines. The latter two would be easy enough. There aren’t too many billboards where I live unfortunately. I’d have to make a day of looking for them and bring my camera with me. I do like the idea though.

  2. Great Article!
    Good point about using white space in mobile design.
    What about designing Twitter bg? It seems like everything is usually crammed into the left side, but nothing on the right. This lack of balance makes me cringe…

    • Thanks Kate. With Twitter it’s because they only allow you to do so much in regards to designing your profile. For the most part all you can do is upload an image and since you can’t know in advance the browser resolution of visitors will be it makes it difficult to use full screen images.

      You couldn’t really place important information on the right since it’s likely to end up off the screen or beneath the main content area of your profile. I’ve seen some people make use of the space, but in general there’s only going to be so much you can do on the right side.

  3. good article with some solid advice, the only thing I have an issue with is fixed vs. fluid layouts of webpages.

    You are absolutely right in the one regard that most all designers (I’ve dealt first hand with 4) will design a website constrained to the 1024×768 screen size.

    Now as a web developer, I fully understand that 1024×768 is the average screen size out there, but it alienates your viewers. Particularly those who have larger screens and cruise the internet in full screen mode.

    On smaller screen size, say 1280×800, it’s not as bad, but when you get up to 1680×1050 (what I use), sites become annoyingly crammed together.

    This is really just a personal preference, but every site I make that doesn’t have a designer, uses a fluid layout.

    You can still have white space, even set distances of white space, and sill have the main content stretch to take up the full size of the screen. You just need to know how to use CSS accordingly.

    • Thanks Steve. I hope I didn’t give the impression that I’m against fluid designs. If I did, my bad. It’s more that both fixed and fluid designs have their tradeoffs and I want people to be aware of them.

      I completely understand the situation you describe, however I’d also point out that with a fluid design as the browser is open wider, either the text starts to get very long or you inevitably have very wide spaces between columns and elements. You do lose control over aspects of your design when the design is allowed to expand and contract.

      Personally when I see the main content stretch I find it difficult to read and so I tend not to read. I’m more inclined to leave the site. That’s not going to be true for everyone, but I’m sure it’s not just me who feels the way I do.

      That’s the nature of designing for a browser. I don’t think it’s something we should avoid. I think it’s something we should embrace. Having said that I don’t think anyone has come up with a really good solution yet for fluid designs.

  4. Going crazy I have a small sign that says JESUS but done so that you only see negative space and stick like wooden matches have the positive . I would love to know how to figure out the alphabet done like this . Do you know how so I could take a word like SAND but have your eye go to the neg. space in between the wooden match symbols.

    • Do you have a picture of your sign or a link pointing to where I could see it. Sounds interesting.

      I don’t know that there’s an automatic way to have people see the negative space. I think we’re all trained to zero in on the letters. You could try making it appear like the wooden match symbols are the background and make the negative space in the letters appear to be foreground. Maybe if the matches appear to be cut outs.

      You could try moving the matches in a specific letter further away from each, possibly even closer to the matches in other letters. There’s a danger in moving them too far apart so no one can put them back together and recognize the letters.

      Just a couple of ideas. i’m not sure how well either would work, but probably worth trying.

Leave a Reply

Your email address will not be published.

css.php