ux news / Raindrop.io |

Whitespace (or White space) is probably
the most under-appreciated
yet impactful part of a good design.
Whitespace refers to areas
that aren’t the content of the design.
That’s everything
from the space around the layout,
margins separating pieces of content,
to the spaces between lines of text.
In reading material,
this space is often the white of the paper,
but whitespace isn’t really about color at all.
In art you will sometimes hear it called negative space,
space that is not the subject
of the artwork.
Personally,
I like this term better,
but web design is descended
from graphic and print design,
so “whitespace” it is.

An app that doesn’t use it well feels cluttered
and it is difficult
to distinguish hierarchy and interactions.
After talking for so long in previous chapters
about how important content is,
it may seem counter-intuitive
to think of the space between the content
as being equally important.
Whitespace tends to go unnoticed.
After all,
it is just “empty” space, right?
However, once you see its effects
it will be hard not to appreciate whitespace used well.

Whitespace happens on two different levels in a design,
one at the layout level between large blocks of content,
and at the much smaller level of text.
While they work together
to create a beautiful whole,
these two different kinds of whitespace
are managed very differently.

Creating focus with Macro-whitespace

Macro-whitespace, you might guess from the name,
is the larger of the levels that I mentioned.
It creates breathing room
between large elements to create hierarchy on the page,
and generally making the page feel approachable.
This is essential when grouping like objects
because part of making elements feel related
is pushing the surrounding elements away.
You’re managing the space between objects,
but in a weird way you are also managing time
(feels powerful, doesn’t it?).
Adjusting the space between elements
controls the pacing of the page,
which affects the user’s attention
and experience of your application.
When you give your content ample room
your pages do get longer,
and product owners will often fight against that.
However, the result is that
your content is faster and easier
for your user to process.

One brand that consistently
uses strong macrowhitespace is [Apple].
Product owners have been chasing after
“the Apple look” for years,
describing it as “clean” and “simple”.
Some of their signature look comes
from close attention to typography and great photography,
but the real secret is whitespace.
Apple is known for producing high quality,
painstakingly designed products.
That kind of branding requires
a strict styleguide
with design cues that serve as a signal
to the kind of high-end customers
that Apple wants to attract.

As you can see in the example above,
Apple uses generous amounts of whitespace.
This works together with the thin typeface
and large font sizes to make sure
that there isn’t too much information
on the screen at once.
This technique is pretty common in marketing pages,
but Apple uses this technique almost everywhere,
creating a unified brand
that feels elegant and crafted.

Whitespace also creates balance.
After all,
centering an element could be thought of
as adding whitespace to the sides.
Making two sections symmetrical is often
about managing the whitespace around those sections.
Being aware of whitespace when composing your design
will make balancing elements easier,
and you may also discover ways to use the negative space
to your advantage.

Improving readability with Micro-whitespace

The other end of the whitespace scale
works very differently.
On the small scale,
you’re talking about the space between lines of text,
or even between and within characters.
As Mark Boulton describes it
in his excellent A List Apart article,
this is “the itty-bitty stuff”.
It’s the space between an icon and label,
between an image and the surrounding text,
and the space between paragraphs.

Here are two basic examples
of the popular blog platform, Medium,
with whitespace removed
and with the original amount of whitespace:

Reducing whitespace
and spacing between paragraphs
makes it harder
to read the lines of text.
It’s difficult to separate the words
when reading big paragraphs,
and it can get frustrating pretty quickly.

Medium takes design seriously,
which might account for their popularity.
They’re doing a lot in the CSS
with both macro and micro-whitespace.
First of all, there is a max-width on the content,
which on bigger screens will give
ample breathing room on the sides
and keep the lines of text
at a comfortable length.
When talking about whitespace and text,
it is usually measured in ems,
relating it to the size of the letters.
Margins between paragraphs
are rather large at about 1.5em.
The heavy lifting though is the line-height,
which is set at a large (and very specific) 1.58em.
There has been a lot of discussion
over the best line-height
(also called leading),
and researchers generally agree
that somewhere between 1.5 and 2.0 is optimum,
but designers often set theirs closer to 1.3.
This probably sounds very nitpicky,
but you’ll have to try for yourself
to find the best amount for your project.

If you want to pick even more nits,
Mark Boulton recounts in that same article
the process that designer Erik Spiekermann used
in his redesign of the Economist.
Determined not to increase the number of pages
in the magazine
(and therefore printing cost),
he turned his attention
to redesigning the typeface itself!
He made the typography thinner
and added more whitespace
in the anatomy of the letterforms.
This meant they could get away
with keeping the leading small
and it still felt lighter and more comfortable.
This is a great example
of how tweaking whitespace in one detail
can decrease the negative effects
of the lack of it in others.

CSS gives us quite a bit of control
over the minutiae of text,
so take advantage of it
to give special attention
to the small details.
Make these small building blocks build on
or contrast with your macro-whitespace
to guide your user through the experience.
It does often go without conscious appreciation,
but your users will thank you for it
through the smiles on their faces
and their return visits.