geometric CD icon

CD geometric icon     

[ FYI #3 ]

I M P R O V I N G   P R A C T I C E

using white space effectively


Graphic design books and journals are usually full of information about the judicious use of “white space” (areas on the printed page that are deliberately left blank). While there’s a tendency for those who monitor costs in an organization to equate white space with wasted space, good designers know that

Space, in and around the text, is not only essential to comprehension, it’s also one of the pleasures of the printed page.

In fact,

Space on a page can be as eloquent as the pause in a Shakespeare soliloquy, or as effective as the break a composer inserts between musical notes (“Stop! in the name of love ...”). When artfully arranged, silence adds drama to a performance.

The printed page should be considered a performance, too, with words that sing and images that dance. Too often, though, white space on a page is wasted. But if you plan your white space imaginatively, it can contribute profoundly to the effectiveness of your page.

(John Miles, “Pause for Effect,” in the October 1989 issue of Publish!, pp. 37–8)

Few authors understand the rhetorical effects of blank space better than a poet. During the Renaissance, poetry was widely held to be “vocal Painting” — a both/and concept in which the visual and verbal aspects of discourse forever intertwine. More recently, at the close of the 20th century, we find the poet W. S. Merwin associated with an exquisite use of blank space in Ninja Press’s 1995 rare-book edition (only 160 signed and numbered copies were issued) of The Real World of Manuel Córdova: here, on a 15-foot-long sheet of persimmon-washed kakishibu papers, folded accordion style, Merwin’s poem traces the serpentine meanders of the great South American rivers, as mapped by Athanasius Kircher in 1665. Ten years later in 2005, Merwin reflected on the rhetorical effects of white space in his poem, “To the Margin”:

To the Margin

Following the black
footprints the tracks
of words that have passed that way
before me I come
again and again to
your blank shore

not the end yet
but there is nothing more
to be seen there
to be read to be followed
to be understood
and each time I turn
back to go on
in the same way
that I draw the next breath

the wider you are
the emptier and the more
innocent of any
signal the more
precious the text
feels to me as I make
my way through it reminding
myself listening
for any sound from you

(by W. S. Merwin; as published in the 18/25 July 2005 issue of The Nation, p. 40)

 

Along with poets, good graphics designers use white space to achieve all sorts of effects, including:

1. To focus attention.
2. To complement a concept.
3. To focus attention and complement a concept.

(from “White Space,” in the November/December 1996 issue of Dynamic Graphics, pp. 49–53)

“But white space can be tricky to use correctly.” (Dynamic Graphics, Nov./Dec. 1996, p. 49)

In his essay piece for the October 1989 issue of Publish!, designer John Miles explained about the correct use of margins:

Margins act as a frame around your text. The proportions of that frame greatly affect the style and appearance of your page.

In the conventional book, for example, margins are usually generous, with the widest space at the bottom of the page and the narrowest in the back or spine. Wide margins are fine for a book, even for certain magazines and other publications, in that they encourage a leisurely, comfortable read. Indeed, all that “wasted” space can infuse the book with an elegant, high-quality appearance.

But a wide-margined layout lacks the urgency and flexibility needed for most magazines, brochures, and newsletters. For these publications, a tighter margin will allow you to pack in more information and to add immediacy to your printed page.

Many publications, in fact, have both wide- and tight-margined pages. Esquire magazine’s “Man at His Best” section of short, newsy features has tight margins that create a jam-packed feel; the magazine’s feature stories, though, use more generous margins to set off graphics and convey a more subtle mood.

Whichever effect you choose, be sure to balance your margins. If they’re too wide, you’ll lose immediacy. If they’re too narrow, the margins begin to look smaller than the gutters. The result is a page that looks disconnected, falling apart.

(Miles, “Pause for Effect,” p. 37)

Moving from discussion of how we handle simple margins to bigger areas of space on a page, Miles counsels designers:

Don’t be afraid of space.

and

If your publication’s content allows for a generous amount of white space on a page, use it in large, dramatic areas. Don’t break it up into odd spots here and there that won’t be noticed or that will look messy.

and

In general, space is easier to control in an off-centered (or asymmetrical) layout than in a centered, symmetrical one. That’s because it’s easier to find a useful home for large areas of white space in an asymmetrical layout, and the control of space in a good centered layout is deceptively subtle.

I reproduce below several examples of rhetorical uses of white space given by Miles and by the editors at Dynamic Graphics, who advise:

Adapt one of these ideas for your projects or try variations. You’ll soon see that less can indeed be more.

Unfortunately, what works well for print does not always carry over to other media, especially Web-based communications, such as the HTML page you’re reading right now. Internet browsers still do not handle white space consistently: thus, a subhead that is perfectly positioned above the copy it introduces for viewing in Microsoft’s Internet Explorer will be too far from that same copy when viewed in Mozilla’s Firefox. What appears as an artfully-arranged relationship between subhead and copy in one browser looks ambiguous and unbalanced in the other.

Nonetheless, Web designers still need to learn to work creatively with white space. To quote Miles yet again:

Pausing for effect is something you’ve learned to do when telling a story or delivering a punch line; there’s no reason why you can’t do the same thing when you’re designing a page.

(Miles, “Pause for Effect,” p. 38)

Even a Web page.

 

 


BELOW: example from John Miles, “Pause for Effect,”
in the October 1989 issue of Publish!, p. 37

Designing blank space (1 of 6)

“A generous amount of white space can give a page dignity and style, as with this page [above left] from a British financial adviser’s brochure.”
“Too little space and too many words, though, make for a busy, unappealing design [above right].”

BELOW: another example from John Miles, “Pause for Effect,”
in the October 1989 issue of Publish!, p. 38

Designing blank space (2a of 6) Designing blank space (2b of 6)

(above left) Symmetrical page design — with “imaginative use” of white space — in a 1989 calendar from the Association Typographique Internationale.
(above right) Asymmetrical page design — with “imaginative use” of white space — in a 1989 calendar from the Association Typographique Internationale.

BELOW: TRAPPED SPACE example from “White Space,” in the
November/December 1996 issue of Dynamic Graphics, p. 50

Designing blank space (3a of 6) Designing blank space (3b of 6)

“Don’t trap white space. When seemingly incidental empty space is trapped inside a layout (as shown above left), with little or no avenue to an outside edge it is considered trapped. Rearrange the page to keep the open space on or near the outside of your page (as shown above right).”

BELOW: SUBSTANTIAL SPACE example from “White Space,” in the
November/December 1996 issue of Dynamic Graphics, p. 52

Designing blank space (4a of 6) Designing blank space (4b of 6)

“White space must be substantial enough to be recognized as an actual element in your design. In the poster above left, open space is arbitrarily arranged. The viewer doesn’t know what to focus on. The design above right takes advantage of the concept of space. Message and design mesh neatly.”

BELOW: BALANCED SPACE example from “White Space,” in the
November/December 1996 issue of Dynamic Graphics, pp. 52–3

Designing blank space (5a of 6)

 

Designing blank space (5b of 6)

“Balance white space properly. Since it is an actual component in your layout, the same as your type or art, it needs to be treated as such. In the page design directly above [top image], the balance of the pages seems to tip to the right. The design shown directly below [bottom image] reestablishes balance between the two pages.”

BELOW: SPACE FOR MOTION example from “White Space,” in the
November/December 1996 issue of Dynamic Graphics, p. 53

Designing blank space (6a of 6) Designing blank space (6b of 6)

“White space doesn’t just mean unused space. Open areas can convey direction, motion or work as part of an illustration. The design above left has impact, but the dog could be given much more ‘air’ to jump up and down through, as shown above right.”

to FYI #1 ...

 

CD geometric icon

top of page