Focus on Typography: Space

Typography

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.

image0025

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
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.

image0044

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.

image0064

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.

image0083

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.

image0103

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.

image0122

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.

image0142

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!

Win an Annual Membership to Learnable,

SitePoint's Learning Platform

  • http://www.nathanleighdavis.com Nathan Leigh Davis

    Very informative. Excellent article. It’s great to see web professionals acknowledging the importance of typography.

    For my own personal blog I use space to emphasize typography. I treat each article header as an individual typographic piece, creating the typeface from scratch and then embedding it using CSS. A little extreme, but I love designing type and this allows an infinite amount of control over things such as kerning.

    Thanks for the great article and the opportunity to share.

  • http://www.nathanleighdavis.com Nathan Leigh Davis

    Very informative. Excellent article. It’s great to see web professionals acknowledging the importance of typography.

    For my own personal blog I use space to emphasize typography. I treat each article header as an individual typographic piece, creating the typeface from scratch and then embedding it using CSS. A little extreme, but I love designing type and this allows an infinite amount of control over things such as kerning. See the link above.

    Thanks for the great article and the opportunity to share.

    • http://swebdizajn.com Sasa Nikolic

      I totally agree, and extremely high quality solution, on the user – the right choice!

  • http://twitter.com/explainafide Explainafide

    It seems typography was the forgotten child of web design- but not any more. More and more articles are discussing the importance of typography in design.

    It is really difficult to get right but when you do it certainly sets your website apart from the pack.

  • http://www.printingray.com/sticker-printing.html custom stickers

    Your main mastery and kindness in
    taking care of everything was helpful. I don’t know what I would’ve done if I
    had not encountered such a subject like this. I’m able to at this time look
    forward to my future. Thanks very much for your professional and result
    oriented guide. I won’t be reluctant to refer your site to anyone who needs and
    wants counseling on this issue.