4 Tips and Tricks for more Legible Content

Readability & legibility are both areas of interest in accessibility and typographic design, and many resources exist that attempt to define what constitutes well designed copy. In this post, we go over a few commonly overlooked and newer ways to implement more legible type on the web.

Stay up to date. Subscribe to the UX Booth newsletter.

Subscribers get a 15% coupon to Rosenfeld Media.

Readability & legibility are both areas of interest in accessibility and typographic design, and many resources exist that attempt to define what constitutes well designed copy. In this post, we go over a few commonly overlooked and newer ways to implement more legible type on the web.

1. Add Text-Shadow to Custom Fonts

With a growing number of web fonts to choose from, and new ways to implement custom fonts into sites using CSS instead of Javascript or Flash, it’s becoming increasingly popular to stray from traditional common fonts in exchange for fonts that help define a more unique and consistent brand.

This is great for many reasons, and quite a few font foundries have already begun selling web font licenses making the potential for custom fonts substantial. However, for the time being, there are drawbacks.

Perhaps the most overlooked problem about using these custom fonts is how different devices go about rendering fonts differently. Some devices such as recent Apple computers apply font antialiasing that strongly favors reproducing pixel-perfect letter forms, while other systems (such as Windows computers) render font in a way that favors more legible characters at the cost of non-precise letter forms. In short, this means that fonts look considerably different on Apple and Windows operating systems.

For many common web fonts, this isn’t a big concern. These fonts render well on the web as they are. For newer custom web fonts, this becomes a concern as they will not always render as expected across different devices (or even across different browsers). For instance, take a look at how the Typekit font library renders between different setups:

Browsers that use the default font rendering system implemented in Windows sometimes render custom fonts with seemingly jagged edges.

There seem to be several popular views on this specific inconsistency across browsers and operating systems. Some believe that letterforms should be optimized for legibility, while others prefer an approach where letters are reproduced as they were intended to be displayed. Others suggest that the problem lies with fonts that don’t have proper hinting.

Whatever the case, there is a simple way to create smooth custom fonts in some instances despite font rendering implementations. By simply adding a 1px or greater text shadow, custom fonts will often become much more legible on configurations like Chrome on Windows 7. Take a look at the example below:

In this example, Droid Serif is rendered using no text shadow (top) and a 1px transparent text shadow (below).

In the future, it is likely that this issue will be solved with CSS properties such as font-smoothing, or by browsers implementing their own font rendering engines. For instance, IE9 has made huge improvements to its own font rendering with hardware-acceleration, which makes use of “DirectWrite, ClearType, and sub-pixel positioning to improve font quality and readability“. Until becomes less of an issue, it should be noted that using text-shadows isn’t a fix that works 100% of the time. Some fonts will simply not render well between devices and browsers at all sizes, and should be tested to ensure content can be read effectively (especially in long copy).

2. Use the “text-rendering” CSS property

This is another relatively new way CSS property, with limited browser support. By using the text-rendering property, it is possible to favor rendering speed, legibility, and in the future it should also be possible to emphasize geometric precision of rendered type.

Currently, text-rendering can be used to optimize legibility in Webkit and Firefox 3. By setting the property’s value to “optimizeLegibility”, the user agent will emphasize legibility, sometimes by enabling ligatures, or adjusting kerning in type.

Anthony Kolber has put together a useful demo for seeing how optimizeLegibility affects type at large sizes.

3. Choosing number of words/characters per line

Determining an ideal number of characters per line and accompanying line space is a subject of much debate. While some suggest that 45-75 characters per line is the ideal length, other studies show that longer line lengths can result in faster reading speeds. Even though people may read longer lines more quickly, readers report that they actually prefer shorter line lengths.

Perhaps there really is an ideal number of characters per line and we simply haven’t found it yet (or at least agreed on it), but it’s almost assuredly related to other properties such as line spacing. Line spacing (leading), or line height, determines the height of a line of text. A taller line height means more space between lines.

Line spacing can greatly influence the appearance of large blocks of text.

Depending on the font being used, the size of the font, and other properties, it may be necessary to tweak line-height, but it’s generally accepted that longer lines require more leading. Adjusting the line-height of blocks of text is very simple using CSS:

p { /* Your selector */
line-height:24px; /* This could also use other units such as "em" */
}

4. Choosing text with appropriate contrast

Choosing appropriate font and background combination colors/brightness is another subject of debate for screen media. A point that is generally agreed upon is that text must meet a minimum contrast ratio in order to be read effectively by a large audience.

According to the Web Content Accessibility Guidelines 2.0 (WCAG20), text should have a minimum contrast ratio of 4.5:1:

A contrast ratio of 3:1 is the minimum level recommended by [ISO-9241-3] and [ANSI-HFES-100-1988] for standard text and vision. The 4.5:1 ratio is used in this provision to account for the loss in contrast that results from moderately low visual acuity, congenital or acquired color deficiencies, or the loss of contrast sensitivity that typically accompanies aging.

While these rules imply that higher contrast ratios are ultimately better, some people suggest that too high of contrast actually hurts to read, and use off-white backgrounds, or off-black text instead of 100% black on white. There is however not much quantitative data in this regard. A fewsourcesclaim that too much contrast can be difficult for dyslexic readers to view. With these considerations in mind, some designers opt to use #333 instead of #000 (or similar off-blacks) in attempt to make reading more pleasant.

An example of using off-black (#333) text on a white background from the Google Blog.

Useful resources

The Elements of Typographic Style is applauded by many as an incredibly useful resource for graphic and typographic designers. Robert Bringhurst does a wonderful job teaching the fundamentals of typographic style, and much of the information presented in the book can be useful when designing for the web.

WCAG 2.0 provides recommendations for making web content more accessible. While it isn’t exactly loved by everyone, guidelines offered by WCAG still seem to be useful for the most part.

The Effects of Line Length on Reading Online News is a study that examines “the effects of line length on reading speed, comprehension, and user satisfaction of online news articles”. While this is an interesting read, the study only samples twenty college-age students, which could easily not make it relevant for all readers.

Thanks Aden. 1.5em used to be the standard size I used as well for line height. I’ve since moved away from using em’s for the most part though in screen design in exchange for pixels. To me, they’re simply easier to set.

I’m wondering if there is a reason you prefer the em unit? I know a lot of people do use that still.

line-height should correspond with line lenght. when the line is long, you move your eyes to the right and loose the beginning of the line. If the line-height is too low, you will have problems with differentiating which line you should read next.

That translates to a simple rule: the less chars there are in line, the smaller line-height can be.

On a side note, narrow columns are good for quick scanning of content and wider ones are better if you are to actually read the text.

This is good stuff! i didn’t kno u could give transparent text shadows. Whats with multiple text shadows??
Next time I’ll keep these things in mind while working with text esp. legibility & contrast ratio of 4.5:1

As an example, sometimes text-shadow is used to give text a bevel effect. a solid 0px light or dark shadow will be offset by 1px from the text to give it the impression of being cut into an interface. It’s just a visual effect you see on some interfaces.

However, I wanted to make clear that it’s possible to setup multiple shadows that way people understand that you can still achieve these sorts of visual effects with custom fonts, while making sure the font itself is rendered smoothly.

It’s good to see some care being taken to maximixe legibility in web pages.

I define legibility as:

that combination of type and display that best aids the ease and speed with which the reader can recognise the structure and content of the text;

and readability as:

the choice and order of words that best engages the reader’s interest combined with typographic cues that best allows the reader to comprehend the text.

Another neglected aspect of legibility and readability is the level of contrast between the text and the background. Some designers just do not understand that there must be sufficient contrast otherwise the reader may have to squint to make out the words at the expense of the ease of absorbing the structure and content of the text.

I’ve adopted a process of taking a standard few lines of text in possible ‘book’type faces and counting the number of black pixels in each sample. The face that returns the greatest pixel count is very likely to maximize both legibility and readability.

It’s good also to see a reference to maximum line lengths. In my view, nothing turns a viewer off more quickly than wall-to- wall words in small sans serif type.