Designing with White Space

Learn just how much more less can be.

Clutter is rarely a positive thing when it comes to graphic design. While it can evoke an emotion or pastiche, usually it’s the hallmark of an unassured or novice designer. When you’re not fully confident in what you’re doing, there’s a tendency—one I’ve succumbed to far too many times—to overcompensate by adding more stuff. This approach can have endearing results in a pub or restaurant or other realms, but rarely does any favors to a print or web design. So when challenged with a design problem, instead of throwing in more content, try adding more white space—the stuff without content—to bring the content you have into sharper focus. Using white space effectively comes with confidence and knowing how to employ it to your advantage. To start with, that means dispelling the myth that because it’s empty, it’s unimportant. Not to be confused with wasted space, white space is designed absence, not just space that’s left over when the text ran out. It’s a conscious choice: even with all the design tricks you have up your sleeve, you’ve chosen the path of restraint. Rather than the easy option of adding more content, you’ve chosen to use—or activate—the space in the layout to help your viewers better understand and appreciate your design. This isn’t because you ran out of stuff, or didn’t have anything better to put there, but rather because presentation and context is important, and by carefully considering the negative shapes, you’re making the positive shapes more interesting. White space gives a layout form, holding it together with emphasis and structure, giving meaning to image and text. Indeed, white space and content depend upon each other.  A blank page isn’t white space until there’s something on it. Place an element on the page,

and by creating a figure/ground relationship, the space around it becomes white space (see Figure 1). On the other hand, without white space, content is ambiguous; the reader doesn’t know which elements in the design are the most important, nor how to navigate a layout.

Of course, white space doesn’t have to be white, but can be any color that represents the negative space of a design—the areas that you don’t want the eye to focus on.

Hard Sell

As you’ve probably experienced, when working for design-unsavvy clients, incorporating white space—especially in print layouts where real estate is at a premium—can be a hard sell. Printing is expensive, the client wants the maximum return on their investment, so the impulse to fill all available space—to say as much as possible as loudly as possible—is a difficult one to rein in. We’ve all seen the internet parodies such as White Space Eliminator—a bonus add-on to the uncannily accurate Make My Logo Bigger Cream.

Micro and Macro White Space

White space can be small and subliminal or bold and audacious. At the micro level, white space is about readability. It’s the space around every letter, between every word, and the leading between every line of type. Without it, text would be unreadable: letters would collide, words run into each other, and lines overlap (Figure 2).

There are numerous ways to craft the white space in small typographic details. For example, controlling the permissible variation of word spaces in justified text, whether to use indents at the beginning of paragraphs (and their size), whether to put spaces or thin spaces on either side of an em dash, or between the points of an ellipsis (Figure 3), or how to chunk the different parts of a phone number. And it’s thanks to micro white space that text in upper and lowercase is usually more legible than text in all caps; the varying negative space around the letters makes it easier for the eye to distinguish words by shapes. By contrast, when text is set in all caps, each word presents the same overall profile (Figure 4). Macro white space is the space between the major elements of a composition, like the margins, columns used for pictures and/or captions, and the space between paragraphs and graphic elements (Figure 5). As well as framing the page, macro white space conveys hierarchy and provides resting points for the eye and a respite from wall-to-wall text. By signalling to the reader what’s most important, what elements belong together and which are separate, the macro space provides pacing and rhythm, and allows the reader to rest while navigating the design. Our expectations of white space, both as readers and designers, have changed over time and also vary according to context. Where newspapers used to derive their credibility in part by the density of the page, contemporary newspapers use white space more liberally. In magazines, the amount of white space used might depend on the type of magazine and the tone of the article, with more white space typically being used in “lifestyle” articles than in news or current events (Figures 6 and 7). But white space is not necessarily less effective when there’s less of it. Our brains put emphasis and importance on design elements that are organized by space. The negative space gives visual clues about where to look—and which pieces of information belong together and which are separate. On a pedestrian level, putting a few lines of white space at the top of a text block makes a page more inviting, or just ensuring that there’s more space above a subhead than below it strengthens the connection between the subhead and the text that follows (Figure 8).

Asymmetry

The effectiveness of white space can depend upon how content is aligned on the page. Centering an image or passage of text tends to make the white space passive. Done well, it looks classic; done badly, it looks boring, the content held static in the grip of the equal white space surrounding it. In asymmetrical layouts, the white space is active, and so becomes integral to our understanding of the content. A common and effective approach with asymmetry is to use a layout grid with an uneven number of vertical fields, say 5 or 7. Divide the text into two or three columns, then use the extra column for captions and/or images—or just leave it empty. The position of this white space column can even vary from one page to the next to add variety (Figure 9).

While asymmetry doesn’t guarantee a dynamic design, it does offer multiple permutations for revealing the relative importance of the different pieces of content (Figure 10).

Removing the White Space

As well as manipulating the white space, designers can make a statement with its absence. Bleeding a picture off the edge of the page or across a spread makes the image more dynamic; with a full-page bleed, without white space to frame the image, the image has the impression of being so big that it cannot be contained by the page (Figure 11).

Luxury and Sophistication

White space can be extravagant, and using it in your designs can imply luxury and sophistication—just like the open floor plan of a high-end store versus the crowded shelves and wall-to-wall merchandise of a discount store (Figure 12).

With a wealth of options at your disposal, it’s a statement that you choose not to print on that part of the paper. It shows confidence in your message. You don’t need to overplay your hand or toot your own horn—the content speaks for itself. In a crowded visual arena, so the argument goes, the designs with white space are the ones that stand out. If everyone is shouting, it’s the calm, assured voice that has credibility and that will hold a person’s attention (See sidebar below).

Too Much of a Good Thing?

Remember, there are no guarantees, and it is possible to overdo white space. A connotation of luxury and extravagance is not appropriate for every product or client; what works for a luxury perfume brand isn’t necessarily going to sell dog food. In the wrong context, ample white space could come off as snooty or elitist. Too much paper without ink might be considered environmentally irresponsible, or the design may look unfinished, boring, or even be perceived as having nothing to say. While The Beatles’ “White Album” may be a classic of design minimalism, Spinal Tap’s Smell The Glove (essentially the same design in black) is a parody of empty-headedness. Sometimes less isn’t more, it’s just less. But white space also has a more everyday role. In layouts that are by economic necessity crowded, the way the limited white space is used can make the difference between a functional and highly readable layout, and one that is a mass of foreboding text (Figure 13).

If you subscribe to the “less is more” approach to graphic design, then using white space is part of your daily practice: leaving quiet areas on the page to better structure the layout and better illuminate its contents. White space equates to visual hierarchy, and to layouts that are more approachable and easier to navigate. But even if you’re a maximalist, or just someone in a position where selling white space isn’t possible, it is no less important. At the micro level, white space is essential to readability. The economics of print publishing often mean working with less white space than is optimal—and this makes the limited white space you have especially important. Just as cities need parks and public spaces, so newspapers and magazines need white space, and with a finite amount to work with, how you choose to incorporate that white space within your layout can mean the difference between visual chaos and a pleasant reading experience.