PAGE IS IN PROGRESS

Readable text helps people move easily through a passage, whether they are skimming a list or engaged in casual or sustained reading.

In deference to our readers, we have already explored aspects of legibility (how to choose a font) and readability (how to use a good line length, line height, font size, and alignment to promote horizontal and vertical scanning).

Case, style, weight, and color can also impact otherwise legible fonts. You’ll remember from earlier that we read word shapes. You’ll also remember that legibility depends on two elements: the strokes of the letters, and the spaces in and around the letters. If we lose word shapes, strokes, or spaces, then legibility is compromised, and reading becomes arduous.

Yet texts often contain more than one “voice.” A single text may have an introduction, captions for images, pull quotes, lists, and finally, the main story or main body of text. Much like a system of headings, parts of a text need different treatment; they need to look and feel different from each other so that readers will understand their role in relation to other elements on the page.

You can use case, style, weight, and color to create multiple voices — for example “I’m a caption, not part of the main text, that’s why I’m italic” or “I’m an important quote from the article, and you should read me first, that’s why I’m big.” But passages of text require more reading than headings do.

The trick is to balance creating multiple voices with maintaining readability.

Case

Type set in all capital letters (caps) loses legibility (Figure 11.1). Word shapes, often defined by ascenders and descenders, get lost. Readers have to slow down to recognize individual letters, and have difficulty processing more than one word at a time.

 

Figure 11.1 Top: Text is more legible when set with upper- and lowercase characters. Bottom: A paragraph set in all caps becomes a decorative element. It no longer invites people to read the text.

When a single word is set in all caps, it feels powerful and important. When a word or two within a body of text is set in all caps, it feels to the reader like shouting. When an entire body of text is set in all caps, it becomes a texture, a decorative element. Use all caps sparingly. It is most appropriate for a short passage, a single thought, or even a single sentence.

Style

Type set in italics (or oblique) can lose legibility (Figure 11.2). Word shapes shift as sans serif fonts slant over to one side. Spacing within and between letters gets lost as serif fonts tend to get narrower and closer together in their italic form. Readers have to slow down to process the word shapes, and have difficulty taking in more than one word at a time.

Not all italics are the same; some are more readable than others (Figure 11.2, bottom). When setting a passage of text in italic, choose a font that retains some of its openness.

 

Figure 11.2 Top: Text is more legible when set in normal style. Middle: Italics change the word shapes and force readers to slow down. Use italics for short-to-medium passages within a text. Bottom: Beware! Not all italics are created equal. Some lovely italics, such as Serif Beta 12 italic, are too narrow and less legible on screen.

Setting text as italic does not affect legibility as powerfully as setting text in all caps. While I wouldn’t recommend setting an entire text as italic (roman forms are far easier to read), it can be appropriate for short-to-medium passages within a text.

Weight

Text set in bold (even a well-designed bold) loses legibility (Figure 11.3). Spacing within and between letters gets lost as strokes get thicker and take up more space. Readers have to slow down to process letters (is that an e, an s, or an a?), and have difficulty taking in more than one word at a time.

 

Figure 11.3 Top: Text is more legible when set in normal weight. Bottom: Bold text works for emphasis, but a paragraph set in bold is harder to read. It becomes a dark field of texture punctuated by word spaces.

When a few words are set in bold, they feel important. They create hierarchy and draw the reader’s eye. When an entire body of text is set in bold, it becomes a dark field of texture, punctuated by the white word spaces. Use bold sparingly. It is most appropriate for a short passage, a single thought, or even a single sentence.

Color (Black/White)

White type on a black background is more difficult to read because the white letters glow and “sparkle” in the black background. The sparkle makes word shapes more difficult to recognize. Readers slow down and scanning is compromised (see Figure 6.14, top).

Doing it is not that bad provided considerations are met: light-coloured text on a darker background has a higher contrast to its opposite, so the letterforms need to be wider apart (tracking), lighter in weight, and have more leading. Example: the hero text on http://www.squarespace.com/ (“The secret behind exceptional websites.”). —TE, Pascal.

Yes, but again, giving rules to follow. Those that are good, and learn to pay attention to the details with experience will break the rules when ready. Those that never get past “this is the way to do it” will produce more readable text. J –LEF

I highly recommend never setting white text on a black background. If you must use a dark background, try using a gray background (such as #333333). This lessens the contrast between the black and white, thus reducing the sparkle and eye strain (see Figure 6.14, bottom).

Figure 6.14 Top: White text on a black background sparkles. Bottom: White text on a dark gray (#333333) background is easier to read.

Some people report that reading black type on a white background is more difficult on a computer screen than on paper (see Figure 6.15, top).

This may be the result of the light emitted from the screen. It may be due to the fact that we read best what we read most, and not everyone is used to reading text on the screen. It may also be the result of inappropriate fonts set too small or too big, with too little line height and too long a line length!

This is a result linked to the above comment: black on white has similar high-contrast, high-strain concerns as white on black. Lightening the text ever so slightly (as advised below) is the way to go. 🙂 —TE, Pascal.

Using a legible font, set with a size, line height, line length, and alignment intended to promote comfortable reading, will go a long way to solve the discomfort of reading on the screen. If necessary, however, consider using a gray like #333333 for the text. This lessens the contrast between the black and white, thus reducing the “brightness” of the white (see Figure 6.15, bottom).

 

Figure 6.15 Top: Black text on a white background is easier to read than white text on a black background. Bottom: Dark gray (#333333) text on a white background may be even easier to read.

Color

Type set in color can lose legibility if the text color is too similar to the background color. It can also lose readability (the reading experience becomes uncomfortable) if the text is too bright, or “vibrates” with the background color.

Not all colors are equal; some are more appropriate than others for text. When setting a passage in color, avoid colors that are too light (Figure 11.4)—when you squint, can you still see it? Also avoid colors that are too bright (Figure 11.5)—does the color jump out too much? Do the letters sparkle or hurt your eyes? Finally, avoid using the combinations yellow plus purple, red plus green, and blue plus orange for background and text colors (Figure 11.6). These color combinations vibrate, making text harder to read.

 

Figure 11.4 Top: Use colors dark enough to define the text. Bottom: The text is too light too read.

 

Figure 11.5 Top: Use colors dull enough to engage readers. Bottom: The text is too bright to read comfortably. It becomes a decorative element.

 

Figure 11.6 Top: Use color combinations that don’t vibrate. This combination uses contrast (dark text on a light background) and dull colors (neither color is painfully bright). It does not use colors that vibrate. Bottom: Text in a bright blue plus orange combination will vibrate even more on the screen.

Setting text in color doesn’t have to affect legibility or readability if done right. In fact, color can be used in very subtle ways, almost imperceptible to the reader. Using a very dark, dull brown for text can make a page feel warm (Figure 11.7). Using a very dark gray can make reading a little easier (it reduces that “sparkle” or unpleasant glare caused by the contrast between black and white).

 

Figure 11.7 Top: A very dark, dull color can add a subtle tone or feeling to a web page. Brown adds warmth. Bottom: A dark gray softens the text.

Using color in text can visually connect the words to images on the page, help divide a page into multiple voices, or let readers know where to click. The trick is to use colors that create a comfortable reading experience.

Quick Tips

Large amounts of text is easier to read when set in…

• Lowercase letters (not all caps)
• Normal style (font-style:normal;), not italic
• Normal weight (font-weight:normal;), not bold
• Very dark gray on white (if the page does not use color)
• A color with enough value (dark/light) contrast to keep it from blending into the background (if the page is in color rather than black and white).