4 Tips and Tricks for more Legible Content

These tips and tricks will help you design more readable content for screen readers.

These tips and tricks will help you design more readable content for screen readers.

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).

This is easily implemented in CSS:

      h1 { /* Your selector */
      	font-family:"Some Custom Font", serif;
        text-shadow:0 0 1px transparent;
        
        /* Or, if you need to apply a 0px hard shadow, 
         * you can use multiple text shadows */
        text-shadow:0 0 0 #f00, 0 0 1px transparent;
      }
      

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.

w3.org

Determining the contrast ratio of two colors (text and background color) is easily done with an online tool. Contrast ratio is determined by comparing the relative luminance of the text and background colors.

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 few sources claim 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.

Translations

About the Author

David Leggett

David (TheLeggett) Leggett is a young entrepreneur who specializes in building successful online businesses. For seven years, David has been designing, developing and managing online projects as a self-employed individual. With strong values, a relentless work ethic, and an undying love for self-education, Mr. Leggett has built a career since the age of 15 with little regard to the conventional workplace.

Write for UX Booth

Contribute to UX Booth
Contribute

Contribute a guest post to UX Booth and let the community know what's important to you!



Comments

  1. Good article. I almost always use a line-height of 1.5em or 1.6em now as I find this improves readibility dramatically.

    The other tips are new knowledge to me and will be very useful :)

    • 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.

  2. The look and feel of content is what gets people to stick around on your site..people like the things that are different..

    “Black Seo Guy “Signing Off”

  3. Like the article, but the douchey author photo threw me off.

    • Awww :C

      Glad you liked the article at least.

    • Haha, gotta agree. What’s with the shades? Cross-eyed? Great article though… and that’s what matters in the end.

  4. Your images are blurry. Is UXBooth’s template enlarging them? They’re not doing your article justice.

  5. thanks David

    I love this article.

  6. frylock March 30, 2011

    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.

  7. Useful article, i didnt realise you could get rid of the jaggy edges on custom fonts, this is why i chose the Cufon route as it created cleaner edges, may have to look into this.

  8. regarding line-height, I usually set it to a unit-less value, like so:

    body {
    font-size:12px;
    line-height:1.5;
    }

    that way the property cascades to whatever font-size the different elements have.

  9. Wow. To know that adding a shadow to the text would fix hinting issues with type changes the way I look at my options. A whole new world just opened up.

  10. Jonathan March 31, 2011

    I find it slightly ironic that in a post about legibility, comments from the author are stamped with a watermark that type is written on top of.. creating a legibility issue :)

    Shouldn’t that mark be under your avatar, where text is not?

    • wow,nitpicking on the interwebz, what is the world coming to?

  11. I agree about using pixels with line-height. “em” works good if you have a nice fluid layout, but pixels will always be more precise (and a little more tedious).

    That shadow tip is pretty cool, crazy how it makes the text look better.

  12. Honestly, great tip with the text shadows – that’s a keeper!

  13. Very useful, indeed!

  14. text shadow on droid. that is the perfect little hack we’ve been looking for. nice.

  15. Nice article.

    text-rendering property was very new for me.

    Thanks!

  16. All new to me as i’m trying to get my head around design rather than just getting web pages to rank.
    Added site to my favourites to learn more. Thanks.

  17. I’ve found a good trick is to hold a novel/book up to your screen. I aim to make my markup read just as easily.

  18. LIndsay Rollo May 4, 2011

    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.

  19. Great post! Picked up a trick that I didn’t know about with the text shadowing! Sweet! Thanks :]

  20. I found your post well weighed, well written and a usefull starting point. Thanks.

Related Posts