White space: Visual Punctuation

“How do you use white space?”

This is one of the most frequent questions that I get as a designer, especially from people who need to create information-dense displays like a dashboard or interactive display. White space is the blank area between items on the page, and it is very important for helping information to feel clear, organized, and accessible.

White space is the punctuation between visual elements. In the same way that the pause between notes is sometimes the most important part of a piece of music, the space between visual elements can set the tone for how a user feels about an information display. Used well, white space gives a reader the opportunity to pause and take a breath, and it can help the information to feel a lot less overwhelming.

As a tool, white space can create:

• Clarity
• Sequence
• Structure/hierarchy
• Relationships between elements
• Room to breathe

Let’s take the following restaurant menu as an example:

There are lots of things that make this menu feel crowded and unclear. Making just a few adjustments to the spacing can help things look a lot more organized.

Let’s look a bit closer to understand what’s going on. The original menu is divided up into 6 sections that are so close together that they almost overlap. The uneven shapes seem to interlock like puzzle pieces on the page.

Each section has a heading centered in the column. These establish a vertical flow through the document.

There are also a lot of other things going on.

1. The indented text creates wobbly margins that don’t feel very clear. This makes it hard to separate two columns, especially when they are so close to each other, and it leaves weird shapes in the white space in between.
2. The bold text style helps to separate the menu item name from its description and connects it to the price, but the way the prices are positioned makes it hard to tell which column and menu item they belong to.
3. The individual menu items don’t feel very separate, and so it’s hard to follow the zig zag reading pattern to understand the information.
4. The center-justified text creates a waterfall of information, forcing you to start in the center of the column and read from left to right. This feels unnatural, and it makes the connection between heading, subheading, and menu items weaker as a result. Once you’ve gotten through the waterfall, you then have to zig zag up and down two separate columns (and back and forth across each individual item) to scan the list and find the things you want. With all of that running around, it’s no wonder that it feels exhausting to read!

The updated version makes the following changes:

• Headings justify left rather than center to create common anchor points.
• Subheads justify left to match the heading.
• Increase space before paragraph to separate menu items.
• Remove hanging indent to make a solid, left justified column.
• Decrease font size by 1 pt.
• Increase space between lines to make it easier to see the shape of the words.
• Move section headers further apart to give them room to breathe.

Now, let’s look at how these changes affect the page. 

Headers, subheads, and menu items are all aligned, creating a hierarchy of nested boxes that can easily be read in order. Once you know how the order works, you can skip the headings altogether and just get right into the list of items instead.

More space between the individual menu items makes it easier to tell what information goes together, and the smaller text with larger line spacing feels less crowded and (counter-intuitively) more legible.

The uniform left alignment makes the columns feel more continuous, giving them a more natural reading order, and the section headers better match the document flow. This creates an informal information grid that helps users to scan the information quickly and identify the information that they need. Adding more padding between columns and sections also helps to separate the information and makes it easier to see the document structure at a glance.

And again, here’s the final result:

I didn’t change anything here but the white space, but even a few subtle tweaks make a big difference in how well the menu reads. In the same way that editing can clean up a run-on sentence, proper visual punctuation can help your documents to be clearer, cleaner, and more pleasant to read.