Readability relates to those important typographic factors that are not rooted solely in the DNA of letterforms. In this realm, the typographer rejoices. For it is here where she can exert control over the text, shape the page and establish visual order.
The typographer can enhance the readability of a passage through an application of skill and, along with an awareness of context, determine who’ll read the text and how they’ll engage with it.
Typography may be defined as the art of rightly disposing printing material in accordance with specific purpose; of so arranging the letters, distributing space and controlling the type as to aid to the maximum the reader’s comprehension of the text —Stanley Morison
What Influences Readability?
The readability of a passage of text is influenced by several factors:
Line Length
Line length applies to the overall length of a line of type, which will vary depending on the specific needs of the copy you’re setting.
For instance, a reference work like a dictionary, might be set in unusually short lines (we tend to read reference works in short bursts). Conversely, a novel would likely demand a longer line-length to ensure reader comfort and to allow the text room to breathe.
Here’s a simple rule to live by: Lines that are either too short (shifty) or too long (tiring) make reading difficult. Typographers frequently waiver on the length of the “optimal” line, but a line length of anywhere from 45–75 characters is considered acceptable.
I’ve seen respected websites get away with as much as 90 characters. Ultimately, it all depends on the needs of your text and your readership.
Line-height
Line-height refers to the amount of vertical space between lines of type. The amount of line-space that a given passage of text will require depends a number of different factors: typeface, type-size, line-length, weight and line-spacing are all, to a greater or lesser degree, interdependent.
For instance, a longer measure will generally require more line-space to be readable (than a shorter measure.) Lighter, more “open” typefaces often require a little more breathing room than darker, more compact typefaces.
On the web, it’s often necessary to increase line-spacing beyond what would ordinarily be appropriate for print. Doing so can make it easier to scan or follow the lines and can heighten the visual appeal of a page.
However, it’s important not to get carried away: too much line-spacing can detract from the readability of a text.
Font-size
Given the low resolutions of computer screens and the limited potential of their crude pixel grids, the general rule of font-size on screen is that bigger is better.
As we’ve already seen, anti-aliased fonts tend to break down at small sizes, blurring beyond a legible threshold. As a result, it’s advisable to set body copy between 11-16px.
At larger scales, the screen is quite capable of rendering detail. If there is a particular type face you fancy but that isn’t very legible at smaller sizes, try increasing your type size a bit. You might be surprised by the results. If you have to set text below 10px, use a bitmap font that aligns strictly with the pixel grid.
Relative Readability
Another consideration for sizing text on the web is known as the “Relative Readability” rule, and was popularized by Oliver Reichenstein, of Information Architects, in his blog post The 100% Easy-2-Read Standard.
…stop licking your screen, lean back and continue reading in a relaxed position. —Oliver Reichenstein
The idea here is that most people tend to read screens at a natural reading distance of about (1-3ft?). At these distances, screen type set at 16px is roughly the size of 11pt type in print.
If we do the math (11/16 = 69%) than type set at 12px on screen, read at a comfortable distance, is roughly equivalent to 8pt type in print! (That’s small). Consider your readers.
Color-contrast
On-screen colors are decidedly more intense than their printed counterparts. In print, colors are produced by reflected light that bounces off the page and into your eyes, whereas computer screens actually emit light to generate color.
Resultantly, the colors produced by the additive RGB color model are considerably more intense, being much harsher on the eyes, and more fatiguing (which in turn makes it all the more difficult to perceive fine detail). Reading text on an emissive screen, as I’m sure you all know, is an exercise in ocular endurance.
Consequently, there are a few readability ground rules for using text on screen:
- High contrast combinations like full black text on a fully white background, or fully white text on a fully black background can create a “flicker-effect”, a visual oscillation that can make reading difficult.
- To offset this, take the middle ground. Use a dark gray on a light background, or use white on a dark-grey background.
- Also, a word of caution. Employ the use of color carefully. Tend toward de-saturated colors and ensure that there is sufficient contrast between foreground and background colors.
- Approximately 5% to 8% of men and 0.5% of women are possess some form of colorblindness, or one out of twelve men and one out of two hundred women. To ensure that your designs are as readable as you think, be sure to use a colorblindness simulator like Vischeck.
In a practical day to day application of these principles, the distinction between readability and legibility isn’t always so clearly made—these terms are used interchangeably and there is some interdependence between the two concepts.
Which is to say that a typographer’s consideration of the two concepts doesn’t happen in isolation: they are not mutually exclusive. Good typography requires a thorough understanding and effective interweaving of both concepts.
