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