Fonts

Introduction

Fonts are the style of "type face" used to display text, numbers, characters and other "glyphs" as they are often called in the typography industry. Typography refers to the arrangement and appearance of text. Typography concerns not only the look of the glyphs, but how they are placed on the page (page margins, the amount of empty space between paragraphs or lines, the alignment of text, etc.). The most effective way to control font and other typographical styles is through the use of Cascading Style Sheets (CSS).

Important

In terms of font accessibility, there are a number of principles to keep in mind:

  1. Use real text rather than text within graphics.
  2. Select basic, simple, easily-readable fonts.
  3. Use a limited number of fonts.
  4. Ensure sufficient contrast between the text and the background.
  5. Avoid small font sizes.
  6. Use relative units for font size.
  7. Limit the use of font variations such as bold, italics, and ALL CAPITAL LETTERS.
  8. Don't rely only on the appearance of the font (color, shape, font variation, placement, etc.) to convey meaning.
  9. Avoid blinking or moving text.

Real Text vs. Text Within Graphics

Text can be transformed into sound through the voice synthesizers in screen readers. Text can also be enlarged by screen enlargement or magnification software, without any loss of quality. These are the two main reasons why having content in text format is so important for accessibility. Although it is possible to provide alternative text for graphics, it is not possible to enlarge text in most graphics without some loss of quality (unless the graphic is vector-based, such as Scaleable Vector Graphics [SVG] or Flash, but this introduces a different set of potential accessibility problems).

Example
A pixelated image of the word 'university,' which is difficult to read

The enlarged image of the word "University" above is difficult to read because it has become pixelated.

In addition to readability of text within images, using real text instead of text within images provides many other benefits, such as lower bandwidth requirements, easier translation to other languages, better search engine optimizations, etc.

Font Readability

Best practice is to use the most readable fonts. Unfortunately, this is more easily said than done. Experts do not always agree which fonts are the most readable or which ones are most appropriate for web use. There are thousands of fonts and font variations that could potentially be used on a web site, especially with support for font embedding (a technique for causing custom font definitions to be used in web content). There are, however, many fonts that are natively available in modern operating systems:

  • Arial
  • Book Antiqua
  • Comic Sans MS
  • Georgia
  • Courier New
  • Tahoma
  • Times New Roman
  • Trebuchet MS
  • Verdana
  • etc.

It is generally best to use standard fonts that are available on the end users device. Keep in mind that documents with only one, or only a few font faces are usually easier to read. Using too many font faces can create a confusing visual layout, which is bad for all users, but may be especially difficult for users with reading disorders, learning disabilities, or attention deficit disorders.

Font families

Fonts are categorized into "families" based on their characteristics. The most common font families are

  • serif
  • sans-serif
  • cursive
  • fantasy
  • monospace

From among these, serif and sans-serif fonts are by far the most common.

Serif fonts

Serif fonts are characterized by the flared extensions, or strokes, on the tips of such letters as f, l, and i, as seen in the screen shot below:

Serif fonts also usually have a combination of thick and thin strokes, as seen in the curve of the letter "f" above.

Examples of serif fonts include Times New Roman, Georgia, and Book Antiqua.

Sans-serif fonts

Sans-serif fonts have plain endings, and appear blockier than serif fonts. They do not have the flared extensions, strokes, or other kinds of ornamentation. ("Sans" means without, and "serif" refers to the extra strokes, or lines.)

Sans-serif fonts include Arial, Tahoma, Trebuchet MS, and Verdana.

Cursive fonts

Cursive fonts resemble hand-written pen or brush strokes, often have artistic ornamentation, and sometimes have strokes that connect the letters together.

Because cursive fonts are generally more difficult to read, they are usually a poor choice in terms of usability or accessibility, at least outside of brief, decorative sections of text. Another problem with cursive fonts is that they are less common on users' computers, so the results may turn out markedly different than the designer intended (unless font embedding is utilized).

Fantasy fonts

Fantasy fonts are primarily decorative, and are not designed to be used as the main font for long passages of text. Fantasy fonts vary wildly in their appearance and artistic content. There are no elements or particular characteristics that categorize fantasy fonts other than their decorativeness.

Like cursive fonts, fantasy fonts are generally a poor choice for web content in terms of readability and availability on users' computers.

Fantasy fonts are very artistic, decorative, and very different from each other.

Monospace fonts

Monospace fonts get their name from the fact that each letter takes up the same width of space. Even letters which might seem to require different widths, such as an uppercase "W" and a lowercase "i" take up the same width in monospace fonts. Even the empty spaces between words are the same width as all of the letters themselves.

Common monospace fonts are Courier and Courier New. Both of these fonts have the appearance of old typewriter font faces, and are commonly used to display computer code, HTML markup, and other technical content.

Specifying a font family

To account for the fact that not all computers have the same fonts installed, developers should specify a series of fonts that the browser can use to render the text. The best way to do this is with Cascading Style Sheets (CSS). Using CSS, developers specify the preferred font first, followed by other fonts that can serve as substitutes, and the name of the font family at the end of the list.

Example

The CSS specifies a number of font faces or families.

body
{
font-family: Helvetica, Arial, sans-serif;
}
h1
{
font-family: Georgia, Times, "Times New Roman", serif;
}

In each of the styles above, the browser would apply the first font in the list which is installed on the computer. If the first font in the list is installed, the computer will apply it. If not, it will try to apply the second in the list, then the third, and so on, until reaching the end of the list of fonts, at which time it would apply the browser default font (typically Times New Roman).

Font embedding

Modern browsers allow font embedding, a technique that allows the browser to download font definitions for non-standard fonts and then display text in those font faces. While most system-level fonts are designed for some level of readability, many custom-designed fonts are not. Care should be taken to use fonts that maintain high levels of readability. Simply changing the font face has no impact on screen reader or other types of accessibility, so long as the actual underlying text is maintained in an accessible format.

Font designed especially for on-screen viewing

Although serif fonts such as Times and Times New Roman are generally regarded as the most readable font family for printed text, there is conflicting information about which font is the best to use for web-based content. Conventional wisdom has been that sans-serif fonts are more suited to electronic formats, but this convention probably has its roots in the fact that older computer screens were less capable of rendering serif fonts. Most modern computer monitors are capable of displaying all types of fonts with almost as much perceived clarity as a printed page. Recent studies have resulted in inconsistent findings, making it difficult to say which font family is best suited for the web.

Some fonts, such as Verdana, Tahoma, Trebuchet MS, and Georgia, were developed specifically for use in electronic media, and are now quite commonly used.

Verdana

Verdana is one of the most popular of the fonts designed for on-screen viewing. It has a simple, straightforward design, and the characters or glyphs are not easily confused. For example, the upper-case "I" and the lower-case "L" have unique shapes, unlike Arial, in which the two glyphs may be easily confused.

Another advanelemente of Verdana is that the spacing between letters. One consideration to take into account with Verdana is that it is a relatively large font. The words take up more space than words in Arial, even at the same point size.

The larger size improves readability, but also has the potential of disrupting carefully-planned page layouts. This is less of the issue of the developer designs with flexibility in mind. (See the section below on font sizes.)

Tahoma

Tahoma is another alternative to the Arial/Helvetica style of font.

Note

Helvetica and Arial are nearly identical, though there are small differences. Helvetica was the original font, and Arial was developed later and became more widespread (even if less popular among typographers) due principally to the inclusion of Arial with the Windows operating system.

Tahoma is somewhat larger than Arial, but smaller than Verdana. The spacing between letters in Tahoma is tighter than either Arial or Verdana, giving a somewhat "scrunched together" appearance, especially when compared to Verdana, and especially when used for long passages of text. The spacing between letters can be modified with CSS, but the glyphs in Tahoma still have a tall, narrow quality to them which gives somewhat of an odd overall appearance when the letter spacing is increased. Tahoma is still an acceptable font, but is probably somewhat less readable overall than Verdana or Arial/Helvetica for long passages of text.

Trebuchet MS

Trebuchet is an attractive font, but it has subtle curved embellishments that may decrease overall readability for long passages of text. The curve at the bottom of the lower-case "L" helps to distinguish the "L" from the upper-case "I," but when the "I" is viewed out of context, it looks like it could be a lower-case "L." Some of the glyphs are also presented in a non-standard, more decorative format, such as the ampersand (&), which may also decrease readability.

This is still a rather popular web font because it "has some style," so to speak. It is unique and has an artistic feel to it, but is still readable for the most part. In terms of accessibility, it is better than some fonts, but not as good as others.

Georgia

Georgia is like the other web fonts discussed so far in that it is wider than similar fonts meant for print design. Unlike the other web fonts, though, Georgia is a serif font, more along the lines of Times New Roman.

Georgia is somewhat easier on the eyes than Times New Roman, although high resolution screens with font smoothing technology also display Times New Roman quite well. One advanelemente of using Georgia is that it is not the default text of the browser. It is easier for users to see that the designer has applied some style to the font when fonts other than the default font are specified. Georgia ends up looking slightly more artistic than Times New Roman, though CSS styling can certainly breathe new life into Times New Roman too.

Number of Fonts

The idea of using a limited number of fonts is not specific to disability issues, and is not an accessibility concern per se. It is, however, a good guideline to follow in typographic terms. Using too many fonts can clutter the document and make it more confusing. Documents with no more than 2 or 3 font faces look more organized, more streamlined, and more coherent.

Font Variations

Bold and italic

Two elements in HTML create a bold text appearance, the <b> element and the <strong> element. The <b> element has no semantic meaning. The <strong> element means "strong emphasis." If the purpose in using bold text is to emphasize content or give its meaning importance, the <strong> element is appropriate. If the purpose is to simply present fatter text, the <b> is appropriate as this is purely cosmetic or stylistic. In general, purely stylistic changes should be defined using CSS. The styles for creating bold text using CSS is font-weight:bold.

Similarly, <i> (for italics) and <em> (for emphasis) are also used. The <i> element (like <b>) is purely stylistic and can also be presented using CSS font-style: italic, whereas <em> presents semantic emphasis and should be used to give additional importance or emphasis to text content.

Capitalization

Typing sentences or phrases IN ALL CAPITALS is rarely a good idea. It may make sense under some circumstances, but only rarely. Lengthy segments of capitalized content are more difficult to read. They also may give the impression that the author is shouting. If the author really does want to convey a shout, an exclamation point and/or use of <em> or <strong> may be better.

Screen readers generally do not read text differently if it is in all capital letters, so listeners will not know that the author is giving emphasis to the text. Screen readers may, however, change the voice inflection with exclamation points, <em>, or <strong>.

In some cases, a screen reader may interpret ALL CAPITAL text as being an acronym and may read it as letters rather than words. For example, a screen reader may read the uppercase text CONTACT US as "Contact U. S." because it interprets the uppercase "US" as being an acronym for "United States".

Contrast

Text is much easier to read when there is a sufficient contrast between the text and the background. Black text on a white background is the de facto standard for both print and the web. However, this combination is not ideal for all users. Users with very low vision may set the background to black and the text to white or yellow. Users with dyslexia may set the background to an off-white color or light yellow, with black text. Some people with dyslexia lay a clear sheet of tinted plastic over the screen in order to read more effectively. Web developers cannot control for these user behaviors, and they do not have to. Users will do what they need to do, and what they are accustomed to doing, in order to read. The main concern for web developers is to ensure a high degree of contrast for the general population of readers.

Example

Yellow on black is good contrast.

Black on white is good contrast.

Maroon on black is bad contrast.

Green on red is bad contrast.

The Web Content Accessibility Guidelines define a formula for determining whether there is sufficient contrast between the foreground and the background. Tools such as WebAIM's Color Contrast Checker make it easy to check contrast thresholds and determine WCAG compliance.

Font Size

Should you specify a font size other than the default font size? This question is one of many design questions that is best answered by saying "it depends." Designers have a wide range of control over font size with CSS. Some designers think that the default font size is too big. Perhaps it is, for some users. For other users it may still be too small. It is impossible to create the perfect font size for all audiences.

Fortunately, most browsers allow users to enlarge or shrink the font size according to their preferences. Users with low vision often alter the settings of their browsers to accommodate their needs. Some users use screen enlargement software to accomplish this task. In many ways, the font size is not as important as it used to be, because of the increased customizability of browsers and assistive technologies. However, it is important that your design accommodate increased text sizes without loss of readability or functionality.

Relative units vs. absolute units

For development purposes, it is best to use relative units (such as percents or ems) to specify font sizes rather than absolute units (such as pixels or points). This provides much flexibility in modifying the visual presentation using CSS. For accessibility, because modern browsers adequately resize text regardless of how the size has been defined, it is not vital that text sizes be defined in relative sizes.