Improving Accessibility through Typography

Posted June 6th, 2007 by Joe Dolson

Among the many decisions you need to make when designing accessible web sites, typography seems to frequently be only shallowly addressed. Typography is rarely completely ignored — but it is greatly simplified, to a point that the issues raised don’t always complete the picture of accessible text. Accessible typography is commonly simplified to these three questions:

  • How big is that font?
  • Is this font readable?
  • Is this enough contrast?

Typography has many facets which go beyond font faces, sizes, or the color of text. Taking typography into consideration at every step of the way can enable you to prepare a much more readable, accessible document.

How big is that font?

The size of the font is not really a relevant question. It’s better to ask yourself how easily the size of the font can be changed and whether changes in the font size cause any other problems with the text. Take a look at the text at multiple sizes. When you change the size of the text, what happens to the space between lines of text? (In typography terms, I’m discussing leading, which measures the space from the baseline of a line of text to the baseline of the next line.)

Using a Cascading Style Sheet (CSS) this space is set with the line-height rule. If you’ve set it to a fixed value, using pixels for a unit, for example, the space between lines will not change between different font-sizes. The resulting mess will cause lines to overlap at large sizes or it will cause the lines of text to be set very far apart at smaller text sizes. Either way, the resulting text is more difficult to read. Using ems to define line-height will allow this spacing to grow or shrink with your text as it changes.

Example: Poor Line Height –

The resulting mess will cause lines to overlap at large sizes.

Letter-spacing (or tracking) is an additional text option which you can control with CSS, but should only make use of after careful consideration. In typesetting, letter-spacing is frequently adjusted (by very slight amounts) in order to remove unsightly word divisions or clean up the ends of paragraphs. In web design, text will re-flow differently depending on the user’s settings for font-size, browser width, or the user’s font selection: using letter-spacing to control text layout is impractical at best. In most cases, you should avoid changing the letter-spacing in any block of text.

Either tight or loose letter-spacing can be severely detrimental to the ease with which text can be read. Tight letter-spacing (with narrowed spaces between letters) can cause the letters to touch or overlap, making it difficult to recognize individual characters. Loose letter-spacing (with widened spaces between characters) may make the letters more easily distinguishable, but makes the word boundaries more indistinct. There is always the potential for specific cases which require an adjustment of letter-spacing: a badly designed font may require adjustment. Letter-spacing adjustments are, however, an inadequate tool for correcting poor kerning.

Example: Tight and Loose Letter-spacing –

Either tight or loose letter-spacing can be highly detrimental to the ease with which text can be read.

Justification can also be a problem. Specifically, full justification, where you attempt to evenly align the left and right boundaries of a block of text. This method can work well when the line-length is long enough, but falls apart when there is insufficient space.

Again, your beautiful layout might fall apart badly when you enlarge the text. As fewer words fit onto a line, the spaces between them grow larger and larger. This kind of broken text block becomes increasingly difficult to read.

Example: Full-justification with too-narrow text block –

As fewer words fit onto a line, the spaces between them grow larger and larger.

Doesn’t really work all that well, does it?

That’s a nice, readable font, isn’t it?

I don’t know. Is it? First rule of font selection on the web is that you don’t have many choices: and you don’t know that any given visitor is seeing the font you’ve selected. Set your fall-back fonts! CSS gives you the option to set a descending list of font choices for your design. Make use of it, and check your site out using each font at a variety of sizes.

The readability of a font is dependent on what’s being written in the font. You’ll commonly find yourself needing to use different fonts for your headlines, your body text, and your navigation. Just don’t start thinking that the wonderful font you’re using in your headline will be effective in your body text. The features in a heading which add flare and interest can easily cause a lengthy written passage to become more difficult to read.

Honestly, as long as you ensure that your principal font choices are readable and resize well and you provide fall-back fonts which are among the commonly available web fonts, you’re doing all right. Getting carried away with font selection is one of the worst mistakes you can make. If every block of text is in a different font, the cognitive faculties required to process the information radically increases. Making your page overly complicated by using a wide variety of fonts erects a barrier against your users.

That’s enough contrast, right?

Or is it too much? The gut reaction is frequently to make contrast as great as possible in order to ensure readability. The real problem, however, occurs when you approach any extreme in contrast. Extremely low contrast is a problem. Dark gray text on a black background will not be easy to read. Extremely high contrast is also a problem: black text on a white background will certainly have advantages against low contrast ratios, but will still cause problems for some populations. If you read Mel Pedley’s three-part article from 2006, “Designing for Dyslexics,” you should have some idea of the problems relating to high contrast text:

In Part 1, I described a condition known as Scoptic Sensitivity Syndrome. This syndrome can make high contrast text difficult to read because the words seem to constantly move on the page. — Mel Pedley

Backgrounds on the web frequently involve more complex issues than pure color, as well. Any image can be used as a background — and it’s astonishingly easy to create a background which will conflict with the text in such a manner as to make it unreadable. It’s obvious that you should avoid using a background which is extremely complex: complex images draw the eye to such a great degree that they can make the text set on top of them unreadable. However, even one of the most common background choices, a gradient, can cause readability problems.

How can such a simple graphic cause problems? Simply put, the core characteristic of a gradient is that it encompasses a range of color. Within that range are incorporated a corresponding range of contrasts against the foreground text. If any portion of the gradient creates a problem contrast with the text, some visitors may lose a portion of the text. Depending on the cognitive abilities of the visitor and the degree to which the text has been lost to view, this could also render the text incomprehensible.

Conclusion

Typography for the web includes all the same elements of concern as typography in other media. However, the way you work with type needs to change in order to accommodate your audience. Realizing that many type elements are ultimately out of your control in the web medium forces the web designer to think differently about how to best use their type resources. Fixing your type to a specific typographic model doesn’t work, because you are not in control of the end product. Instead, it’s necessary to be aware of how user preferences will impact your type choices and avoid scenarios which may render the text unreadable.


21 Responses to: “Improving Accessibility through Typography”

  1. tygossm responds:
    Posted: June 6th, 2007 at 2:46 pm

    Nice writeup Joe.
    Web typography 101 really covering the basics to a “T”.
    I like to get away with leaving many of those things handled by the browser.
    It’s becoming more necessary to debug (view) the type for you designs in as many browsers as you can. The fonts render quite differently, and you might like your choices in one browser, viewing it in another and it may need some tweaks.

  2. Mike Cherim responds:
    Posted: June 6th, 2007 at 4:19 pm

    Outstanding and insightful article Joe. You’re right in that we often discuss typography on the web, but we usually stick to the top three concerns and don’t delve into it as deeply as we perhaps should.

  3. Accessibility and Typography: At Accessites.org | Joe Dolson Accessible Web Design responds:
    Posted: June 6th, 2007 at 8:52 pm

    […] I’ve got a new article published at Accessites.org: “Improving Accessibility Through Typography.” […]

  4. Jermayn Parker responds:
    Posted: June 7th, 2007 at 12:12 am

    Yeah very good tips Joe.

    I enjoyed your points about justification (been caught doing that) and also the line-height. I actually did not know that using the other measurements besides em would cause a problem. Guess one more reason to use em instead of px etc

  5. blog.dsetia.com» Blog Archive » Improving Accessibility through Typography responds:
    Posted: June 11th, 2007 at 3:05 am

    […] Improving Accessibility through Typography […]

  6. Max Design - standards based web design, development and training » Some links for light reading (12/6/07) responds:
    Posted: June 11th, 2007 at 6:51 pm

    […] Improving Accessibility through Typography […]

  7. Robert Whiting responds:
    Posted: June 12th, 2007 at 8:00 am

    A nice write up, thanks.

    Using ems to define line-height will allow this spacing to grow or shrink with your text as it changes.

    Its also worth noting that if you set your line-height without specifying a measurement unit (i.e. just using {line-height:1.3}), the line-height is worked out according to its parent elements font-size

    This means any adjustment to the font size, whether by user style sheets or browser resizing, is taken into account by the line height and you are able to use px, em, % etc. to size your font knowing that the line-height will always adjust accordingly.

  8. OPC Toolbox » Blog Archive » Improving Accessibility through Typography responds:
    Posted: June 13th, 2007 at 7:22 pm

    […] Joe Dolson provides some practical advice on the  proper use of typography to maximise accessibility. […]

  9. Nemesis Design responds:
    Posted: June 20th, 2007 at 4:26 am

    Thank you for this post, it’s very useful. I need to improve my knowledge abouth typography (web-typography) to design better and more accessible web sites.

  10. Itákora » Blog Archive » Lecturas Recomendadas (3) responds:
    Posted: June 23rd, 2007 at 9:29 am

    […] Breve curso de introducción a la tipografía eficaz. También interesante las recomendaciones de tipografía accesible, descubiertas gracias a Planet HCI. […]

  11. Mindtracks » Typography and Accessibility responds:
    Posted: June 25th, 2007 at 6:54 pm

    […] Joe Dolson Accessites.org of has written a brief but good article on Improving Accessibility through Typography . Going beyond the usual points made on this topic that of font size, contrast and readability Dolson points out that leading (line height) tracking (letter spacing) justification and contrast all influence accessibility. CSS typography Web design […]

  12. João Pereira responds:
    Posted: June 30th, 2007 at 5:10 pm

    Hi
    I like teh point of view and agree with them. Just one question. if this article is about reading a accessbility in he web why do I see it in Furura or Avant-garde? this is not the best sans-serif for reading in screen, i gess? Think about it!

  13. Mike Cherim responds:
    Posted: June 30th, 2007 at 7:17 pm

    I think Futura came about from a suggestion we got. What would be better? I’ll put it, I’m just not a Mac user.

  14. Andrew Arch responds:
    Posted: July 1st, 2007 at 11:06 pm

    Thanks for the article Joe - it encapsulates a lot of what we say about readability. WRT full justification, it can also create the “rivers of white” problem for some people with reading difficulties and some forms of dyslexia. See Peter Rainger’s article A Dyslexic Perspective on e-Content Accessibility (Word format)

    You might also like to add a few lines about right justified and centred text being hard to read (in English anyway). Right-justified text does not provide a clean left-hand edge to return to and find the next line, so some readers miss a line (or three). With centred text this problem is compounded as there are no clean edges to help you move to the next line.

  15. Jennifer responds:
    Posted: July 20th, 2007 at 9:18 am

    @ João Pereira

    I agree. It’s not the best font for reading. Serif font is much easier on the eyes particularly when reading lengthy text.

    @ Joe Dolson

    Not many users know they can configure the font size, no less the font style, in their browser. Many web developers know this, but certainly not folks outside the biz. If this is all about making it easier for the user, why put the onus on them to know all the intricacies of browser tweaking? I believe most browsers default to a serif font. And, I didn’t get to this article via the homepage, so I would have no way of knowing that there are in-site font options.

    Lots of good points in the article. Certainly useful information.

  16. Typography and Accessibility « Mindtracks responds:
    Posted: August 23rd, 2007 at 4:04 pm

    […] 26, 2007 Typography and Accessibility Posted by sharonb under Webdesign  Joe Dolson Accessites.org of has written a brief but goodarticle on Improving Accessibility through Typography . Going beyond the usual points made on this topic that of font size, contrast and readability Dolson points out that leading (line height) tracking (letter spacing) justification and contrast all influence accessibility.   […]

Sorry. Comments are closed.




Note: This is the end of the usable page. The image(s) below are preloaded for performance only.