White Space

Empty. Blank. Void. Wasted. That’s how most people see the parts of a web page or magazine spread where nothing is displayed or printed. Graphic designers, however, call such fields of unclaimed territory “white space.” These open areas are as sacred to us as a fresh bar of soap or a fifteen-minute intermission. How did we come to cherish the abyss, and does it have a future in today’s digital world?

The elements of white space

While people typically associate typography, the backbone of graphic design, with the shape of characters, it also concerns the space around and between them. Ever since Gutenberg invented movable type, printers have set text in crisp, justified columns. To achieve this effect with letterpress, the typesetter would insert additional spacing material between elements (as well as hyphenating words where possible). Today, software does the same work automatically. When done well, the variable spacing between characters is so subtle the reader fails to notice it. When done poorly, gaps erupt across the text like wormholes in a damaged universe. To see examples of choppy spacing firsthand, take a look at the print edition of nearly any city newspaper.

In addition to the spaces between words and characters, the margins of a page are a place where designers cultivate the beauty of nothingness. While a cheap paperback novel is jammed with prose right up to the edge, the wider margins of an elegant book of poetry offer the hands a place to grip the book, and the eyes a place to rest. Such margins function, essentially, as a frame, a border that passively surrounds the featured content.

A key tool for organizing the open space of a page or poster is the typographic grid, an invisible lattice that divides an area into vertical and horizontal units. The architecture of the grid becomes visible as it gives shape to content but also it is also made visible by the fields of space left empty. Advocated by Swiss designers including Emil Ruder and Karl Gerstner in the 1960s, the grid suggests where to place elements and what size and shape to make them. It provides an underlying rationale that allows variation and contrast to coexist with order and repetition. In place of the static frame of a classical page layout, the grid encourages the designer to create dynamic, asymmetrical compositions in which open space not only occupies the margins but flows among content elements.

In addition to making typographic content dynamic, white space can also drawi attention to forms and messages in graphic art. Modern graphic designers discovered how to use white space as more than a classical frame. El Lissitzky, Laszlo Moholy-Nagy, and other avant-garde designers working in Russia and Germany in the 1920s sought to invade every region of a poster or page with potential emptiness. Inspired by abstract painting and asymmetrical architecture, these designers saw empty space as a palpable substance. Seeking to organize compositions in dynamic and flexible ways, they learned that white space could be activated—not merely filled—with content.

From books and posters to computers and phones

While it’s relatively easy to implement grids for print design, applying them to dynamic web sites is more challenging, especially due to the monetization of pixel space. Web designer Khoi Vinh has written and lectured extensively on making grids for online media. While countless web sites are divided into three or more vertical columns, a fully functioning grid should allow some components to “break the grid” by crossing over multiple columns within a content area. The generous swaths of white space in Vinh’s gorgeous web pages in his popular personal blog, Subtraction, free the eye from relentless clutter while emphasizing the underlying grid structure.

Besides the technical challenges of preserving white space on websites, there are also practical concerns. No one wants to scroll across a 300-pixel dead zone while hunting for bargains on eBay. Online shopping sites are modular systems designed to accommodate different amounts of content per page depending on the merchandise in a given category—thus some product pages have lots of white space, while others are more dense. As a result, white space is built in to such systems in a serendipitous way. For example, in West Elm’s website, generous space around each product’s image yields more or less white space on a page in relation to how many products come up in a given search. Web designers try to build white space into flexible, unpredictable systems.

Despite the growing size of today’s cell phone screens, big fields of white space can be more annoying than pleasing on a mobile application. With space at a premium, interface designers adjust the gaps between and around graphics and text elements in order to guide the eye and create clear visual separation. In a well-designed iPhone app, there’s not a lot of white space, but what’s there has been carefully modulated.

Filling White Space

Working within the realities of commercial publishing, where open space equals wasted money, designers have always had to fight to preserve white space. Open a typical mass-market magazine today and you will find few areas left unfilled. White space is also in short supply on the web, where density is king. A typical news or social media site is tightly packed with content, especially towards the top of the page, where primary information competes with side bars loaded with links, tags, and ads.

From an information design point of view, using less white space can help streamline communication. Infographics guru Edward Tufte has argued that loading a lot of information into a small area allows readers to compare data more quickly—in contrast to spacing out charts and graphs across a series of Powerpoint slides or placing them on separate pages in a book layout. Just as a dense urban neighborhood can be easier to navigate than a sprawling suburb, so a tightly packed page or screen can reward readers with quick access to data.

Graphic designers have long been enamored of white space. For us, it is more than an empty vacuum—it is a poetic presence and a functional tool. In an era of tiny screens and shrinking budgets, the idea of leaving anything blank may seem foolhardy. Yet when used well, open spaces—even small ones—can make information easier to understand and more pleasurable to read. Every pixel has the potential to please the eye.