Focus On Typography, Part 4: Space

Having taken a look at contrast, hierarchy and size, in the final part of our focus on typography, we’re looking at 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 important 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

That concludes our look at four of the fundamentals of using typography on your web site. I hope you’ve found it useful and can see that by using several, if not all of these concepts together, you can create attractive, legible pages.

I’d love to see some of your links to pages you like using white space as a design element.

Related Reading:

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.pageaffairs.com/ ralph.m

    Thanks for your posts, Jennifer. As you and mattymcg commented after Part 3, there is a place for introductory material at SitePoint.

    Only thing I didn’t get from your posts is specific guidelines on how to lay out text, and I know it was only an introduction… but still, it does seem to confirm a feeling I have (which you may like to comment on): I don’t have a graphic design background, but I feel that 9 tenths of good typography is about “standing back” and “taking a look”, thereby picking up on the feel of the layout. I know graphic designers must hate to hear that; and indeed, when I lay out text like this, my graphic designer friend looks like he’s going to throw up! And yet I’d say that I follow everything you cover in this series.

    I’ve never quite figured out the “secret science” of the graphic designer! No doubt there is more to learn…

  • http://www.laughingliondesign.net Jennifer Farley

    Hi Ralph,
    Thanks for taking the time to comment.

    I would agree with you regarding the idea of stepping back and taking a look. I think that’s important. Usually when I’m designing, I do a large chunk of work, then shut it down and come back the next day. I find that by stepping back and looking again, I can see where improvements can be made.

    Having said that, there really are principles and fundamentals for design and typography that “work”. There are things that work and things that just don’t look attractive or somehow disturb how we expect to see information presented.I think that with practice, you start to see little things in your designs that you know are not quite right and when that’s backed up with your knowledge of these sort of guidelines, I would say many people can develop an eye for it.

    I will be more than happy to cover more specific examples of text layout in future posts. Maybe a before and after would be a good way to go?

  • http://www.pageaffairs.com/ ralph.m

    That sounds like a great idea, Jennifer. I’m way too far gone to do a design course now; but, like every other discipline, there is a long tradition of knowledge and science behind graphic design, and I’m sure anyone (like yourself) who could convey the essence of it to the uninitiated (like me) would be much appreciated!

    I look forward to your future posts.

  • http://www.historycommons.org/ Black Max

    Jennifer, nice series. I wrote one recent article on font families (with more planned, I hope), and your articles cover much material I didn’t do. Typography is a large and expansive subject.

    Minor caveat: I thought it was interesting that you chose to use points in your first text example. Points are commonly used in print typography, but almost never in Web design (as you know). Might be worthwhile to add a bit about that…?

    I have to disagree with the assessment that this is an “introductory” article. A lot of designers know virtually nothing about typography except — maybe — which fonts appear on most machines, and perhaps a basic grasp of well-chosen font families. For many accomplished designers, it is something of a forgotten area of concern. Your articles are, I hope, helping to bring typography/fonts as a design element to the fore.

  • jamessy

    Good tutorial, I hope theres more to come.

  • flash design

    very helpful

  • Moe Hong

    So, on the supplied examples, I see letterspaced lowercase, a prime instead of an apostrophe, too-tight letterspacing (what is this, Pushpin in 1977?) and plenty of flash over substance. So much for graphic design and real visual problem-solving; desktop publishing has finally taken over the discipline, only there’s no discipline any longer.