Typography Part 3: It's All About Legibility

If there is any one aspect of laying words on a page that is either overlooked or misunderstood it is legibility. It is the words on the page that contain the site's information. If the font is not legible, it is going to be difficult for the visitor to comprehend what is being said.

Flash developers can be amond the worst offenders. For example, I will be speaking at a conference later this year. I was notified I was added to the speaker list and decided I would check it out. Here is exactly what I saw:

Text in Flash is usually not legible or readable.

Image One - Flash developers are among the best at making legible type unreadable.

First off, I really can't read the list's heading. I'll get into why later in this article but, at a screen resolution of 1152 X 768, my name virtually disappears. You need a magnifying glass to find it.

The importance of legibility can't be understated. The letters in the alphabet represent sound in the spoken language. If you obscure the letter you obscure the sound. If you obscure the sound you diminish any meaning the letter may have to one's understanding of the words. Legible typography is a very powerful method of communicating information in an objective manner.

Understanding letters

Making type legible and the meaning it communicates understandable, requires you to understand how letters convey information. For example in the illustration below, I have covered the top halves of the letters. Though your initial reaction would be to claim the word is communitymx, exercise a bit of caution. Are you sure there aren't a few instances of the letters n, i or e in the word?


If you move the black bar down and cover just the bottom half of the word you will see the word is, indeed communitymx.

The key point here is how we read letterforms. The key identifier is the top half of the letter, not the bottom half.

In the next example, you discover which side of a letter gives the visual clue as to its meaning. The right side of each letter is covered. As you can see it is really difficult to decipher the individual letters in the word. Move the blue boxes to the left to reveal the right half of the letters. Suddenly the word condor appears. This is because the right halves of the letters are more recognizable than the left half.

Even the choice of font can have an impact upon the legibility of the words on the web page or in a Flash presentation. In certain fonts such letters as, f, I, j, l and t, can be confusing and misunderstood for each other. In this example the words fail, tail and jail (set in Avante Garde) could easily be misread because they each begin with a letter of a similar shape.

Lettershape can be a source of confusion.

Image 2 - Even the shape of letters can make words confusing and misunderstood

As you can see from these three examples, Robert Bringhurst's suggestion that you read the words on the page before you select a font makes sense.

Readability is more than reading

Individual letters will combine to form words. That is how we read. Words all have a distinctive shape and we look for that shape when we read. That shape is formed by a recognition of the pattern of letter shapes that form the word. Once we understand that pattern we can understand the word. Play with that shape, and again, you interfere with access to understanding.

In this example an upper case treatment of the word provides very few visual clues.

Visual clues aid legibility

Image 3 - Uppercase vs. lowercase. The visual clues are evident in the lowercase version

Words set in all upper case letters are the least legible and the most difficult to read. This has always struck me as a bit odd in newsgroups and so on because all uppercase words are perceived to be someone "shouting" and "gaining attention." In fact, they are the hardest words to read, let alone understand.

The other aspect of using all uppercase is quite noticeable. Both versions of "Community MX" have been set using a 48-point Garamond. The upper case version takes up a significantly greater amount of space than its lower case counter part. In fact setting a line of type in all upper case can require up to 35 percent more space on your page than were it set in lower case.

Letter, word and line spacing

The space between the letterforms in a word or line of text can also have a profound influence upon the type's legibility. Done well, the reader won't notice what has happened but will find it easier to read the words. Do it poorly and the reader will move on since the words will simply be too difficult to read.

In the example below, I set the previous paragraph in 12 point Bookman Old Style using Fireworks MX 2004. The first treatment uses the defaults on the Property inspector. The middle treatment set the Range Tracking to a value of -5 and the leading to 80%. Note how difficult the paragraph is to read. This is because the letterforms, words and lines are so close to each other they compete for your attention. The bottom treatment goes to an extreme in the other direction. The letters, words and lines of text are spread apart in such a manner as to force you to work at understanding what the paragraph says.

spacing between letters, words and lines of text can affect readability.

Image 4 - Spacing between letters, words and lines of text can affect readability.

In Dreamweaver MX 2004 you have rudimentary control over letter, word and line spacing through the use of the CSS Styles definition panel. Line spacing is defined in the Type specifications and Letter and Word spacing is set in the Block definitions of the CSS Style Definitions dialog box. If you do set values for these features in your style sheet, use pixels or ems as the measurement system though many developers are moving towards the use of percentage values over em values. It would also be a good idea to preview the page in a variety of browsers because each has its own little quirks. A page that looks gorgeous in Internet Explorer PC may be completely unreadable or illegible in its Macintosh counterpart.

Image 5 - The CSS Styles dialog box lets you control letter,word and line spacing.

Choosing a type size that is too big or too small can also make reading difficult. The small type used in many Flash presentations actually reduces the visibility of the type by smashing the counterforms - the holes in the type -which are an aid to word recognition.

Line spacing guides the reader from one line to the next. If the spacing is low, the lines will conflict with each other. If they are too far apart the reader may have difficulty finding the next line. The font's x-height will also have an effect upon line spacing choices. Fonts with larger x-heights will need more space between the lines of text. In this example two text blocks were set using the same setting on the Fireworks MX 2004 Property inspector. The first example uses 12-point Franklin Gothic Medium. This font has a small x-height. Change the font to Arial and not only does the look change, but the paragraph becomes more difficult to read.

Fonts with a large x-height require more spacing between the lines.

Image 6 - The only thing that changed was the font. Note how the switch to a font with a larger x-height has an impact upon the line spacing.

Weight

When choosing fonts the weight of the font is also a major factor in the decision. Weight is the thickness of the font's strokes and these can improve or harm legibility. A typeface that is either too light or too dark will experience diminished legibility. The issue with light faces is they tend to merge into the background while a fairly thick typeface has a tendency to to loose its shape. This is one reason why it is such a bad idea to add a stroke to a font.

You can see this in the following example. The top text block is set using the 12 point Roman of the Adobe Caslon font. The sentences are quite readable and the letterforms are visible. The middle example uses the Bold version of the font. The bottom example uses Adobe Jenson Pro Light. Note how the text seems to want to fade into the background.

Image 7 - A font's weight can affect legibility.

Font width

Font width can also harm the experience. There are Expanded and Condensed versions of many fonts and they have a specific purpose. If, for example, the text is going into a narrow column, a Condensed type face would be a great design solution. Just be aware that, generally, condensed type faces are more difficult to read. You can see this in the following example. Using only three weights of Univers- 55, Condensed and Extended- the weight of the font has a very noticeable impact upon the text's readability and legibility.

Legibility and readability can decrease depending upon a font's weight.

Image 8 - Legibility and readability can decrease depending upon a font's weight.

Text and color

If there is any one area where the web falls down and plants its face in the sidewalk, it is the use of color with type. The key here is understanding that words provide the information the user is seeking and they should be visible. This is traditionally done by using color to clearly contrast the text from the background.

When reading large amounts of text on paper or a computer monitor, people prefer black type on a white background. Not only that, they prefer this relationship and will look for it. Use this color combination if the words on the page must be legibile. White text on a black background has been shown to have opposite effect.

The possible combinations of type and color are endless. The best way of determining what works is to simply visit sites and look at how the text is treated. If you find a combination that doesn't work, the odds are very good that it's due to the text not being legible against that background color.

In the example below, taken from a designer's web site, the text color makes the text itself almost totally illegible. As well, the headline News is almost lost because it is sitting over a similar color. Note also how difficult the blue links are to distinguish against the black background.

Image 9 - Font color is an important factor in legibility.

Here are some color combinations that I have put together to give you an idea of how the color of a font can actually affect legibility.

Font colors and their backgrounds can affect type legibility.

Image 10 - Font colors and their backgrounds can affect type legibility.

Conclusion

As you have seen in this article, there are a lot of decisions that have to be made before the type arrives on the page. Each choice made will have an impact upon the legibility of the words on your web page and, ultimately, the user's experience.

I started off by showing you that the tops and the right sides of the letters contain the visual clues for the reader. Even then the design of a font can make certain letterforms very difficult to discern.

I showed how the issue of readability is linked into the legibility issue, and you saw how a word set in all uppercase is more difficult to read than its lower case counterpart. Again, the root of the problem was the disappearance of the visual clues we use to identify letters. I also dealt with letter, word and line spacing. Using a series of examples, I demonstrated how the choice of font size, a line length and the space between lines can harm the user experience.

The article concluded with a brief discussion of color, and showed how a poor choice can dishonor the content.

In Part 4, I'll review the concept of of typographic contrast and show you how the views of a typographic master from the mid- 1900s - Carl Dair- reverberate through today's digital media environment.