Focus on Typography: Space

There are a number of ways to add breathing space to your type. White space or negative space helps to focus attention on the words, while line spacing and letter spacing can help to make your text more readable. Let’s take a look at each of these.

White Space

White space is the space between graphics, text elements and between columns on a page. It’s one of the most important principles in layout and design. It’s essential not to think of the space around your type (or graphics) as just blank space. The space is actually a design element all of its own and is used to create a classic or elegant appearance, and as I mentioned previously, this is a decision that you as a designer needs to make. Don’t just let your page fall together.
A web page with very little white space can appear too busy and may be difficult to read and focus on. However some simple ways to increase the amount of white space around your type, are to use

• bulleted items
• headlines and sub headlines
• padding around images
• margins

Line Spacing (Leading)

By changing the amount of space between lines, you increase the readability of a passage of text. If the line spacing is too tight, it becomes difficult to separate the words and is tiring on the eye. In the example below, you can see a paragraph of 12 pt text. As the line spacing in increased, the text becomes easier to read, and a nice airy effect is achieved.

As a rule of thumb, you may need to increase line spacing:

• If the typeface you choose has a large x-​​height, which many san-​​serif fonts do
• If you are reversing the type out, for example light blue font on a dark navy background.

You may need to decrease line spacing if your typeface has a very small x-​​height, as this will naturally create more space between the lines (the x-​​height is the distance between the baseline of a line of type and the tops of the main body of lower case letters).

From the Wikimedia Commons

Letter Spacing (Tracking)

Some typefaces have connecting letters that are designed to sit very close together. You can set the space between letters (known traditionally as tracking) to make your text more readable. If you’re using the “web safe” fonts, Georgia, Verdana, Arial and so on, for your body text, you can usually leave the letter spacing as is. However you might like to change the spacing between letters for headings and sub-​​headings to achieve that airy feel and also stretch the length of your text without distortion.

There are no hard and fast rules when it comes to letter spacing. You really need to trust your eyes and own judgment. If the letters look too close together, they most likely are.

Kerning

Kerning is sometimes confused with tracking. It refers to the adjustment of spacing of two particular characters to correct visually uneven spacing. This is used mainly in print design.
Let’s take a look at some examples of web sites which make good use of space to create clean, legible designs.
Matt Lawrence’s blog is mainly text based, yet still achieves a sense of airy-​​ness by using large heading and sub-​​headings and body text with large line spacing. The background image on the right hand side blends with the page and adds to the sense of spaciousness.

Simpleart leaves plenty of room around the main image on the page and separates three columns of text with gutters. A large margin underneath the three columns gives a nice impression (in this case) of floor space.

Daily Bath & Body is simple, clean and elegant. There’s lots of space around the logo in the header and between the main image and the headline “Indulge daily”. The headline itself uses wide tracking, while the body text is easy to read with good line spacing.

A simple measure is a slightly busier site than the others shown here, but it does a nice job putting a fair amount of information onto one page whilst keeping it legible and attractive. Each section of the page is allowed to breathe, either by using large margins or by using simple graphics such as the pencils in the navigation area.

Finally, just to show that white space does not have to be white, Nine Lion combines a colourful graphic with large headline type. The small body text is cleanly separated from the graphic using a margin.

I’d love to see some of your links to pages you like using white space as a design element. Share them in the comments!