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

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

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

Font Readability

The 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, but the vast majority of these fonts will not work for most users on the web because computers can display only the fonts installed on the computer, and not all computers have the same fonts installed. Windows, Macintosh, and Unix computers each come with a different set of fonts installed with the operating system. Fortunately there are at least a few fonts relatively common to recent versions of the Windows and Mac operating systems, such as:

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

However, it is important to note that these fonts are NOT universal. Many Unix and Linux computers do not have these fonts, and older versions of both Mac and Windows computers may not have them either. Nevertheless, the fonts listed above are common enough that they will be available on most computers. Computers without those fonts will display some other font, like Times or Helvetica, for example, which may not have the exact appearance the developers intended, but the content will still be readable.

In some ways, the scarcity of commonly available fonts simplifies the developer's task. There are fewer options, so it is just a matter of choosing the best from among them, right? Well, sort of. Before trying to answer the question of which font is best, it may be helpful to talk about some of the characteristics of fonts in general.

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

Cursive fonts include Amazone, BT, BernhardTango BT, Comic Sans MS, Embassy BT, ParkAvenue BT, and TypeUpright BT. The default cursive font on most computers is Comic Sans, which is widely available and more legible than most of the other fonts in this family, because it is much plainer and lacks connecting strokes.

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 include Bamboo, Melfina, Mejicana, and Tambor-Adornado.

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 following markup would appear in a separate CSS document, or in the <head> of the main HTML document (surrounded by <style> tags)

body
{
font-family: Helvetica, Arial, sans-serif;
}

h1
{
font-family: Georgia, Times, "Times New Roman", serif;
}

.sidebar
{
font-family: Tahoma, "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif;
}

#special
{
font-family: "Courier New", Courier, monospace;
}

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.

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 common on both Windows and Mac platforms, especially if Microsoft Word is installed on the computer.

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 advantage 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 advantage 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. (See, for example the article It's time we take back Times New Roman on the Web - external link on mezzoblue.com.)

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 fewer fonts tend to look more organized, more streamlined, and more coherent.

Font Variations

Contrast

Text is much easier to read when there is a high degree of contrast between the text and the background. Black text on a white background is the de facto standard for both print and the web at this point. 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.

Algorithms exist to help developers determine whether there is sufficient contrast between the foreground and the background. The first algorithm is for brightness, and the second algorithm is for color difference. The algorithms use the red green blue (RGB) color values common in web development. A color with an RGB value of #000000, for example, has no amount of any color. This is black. Colors are defined by a combination of letters and numbers, which makes the system a bit difficult to understand. White, for example is #FFFFFF. Understanding the system is not necessary, though, since there are tools to determine proper color contrast, such as the Juicy Studio Colour Contrast Analyser - external link. The algorithms are listed here for those who are curious.

Color Brightness Formula:
(Red value X 299) + (Green value X 587) + (Blue value X 114)) / 1000

Color Difference Formula:
(maximum (Red value 1, Red value 2) - minimum (Red value 1, Red value 2)) + (maximum (Green value 1, Green value 2) - minimum (Green value 1, Green value 2)) + (maximum (Blue value 1, Blue value 2) - minimum (Blue value 1, Blue value 2))

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. The Opera browser even allows the entire document to be enlarged, including images. 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.

The menu option in the Firefox browser to increase font size (View > Text Size > Increase).

The menu option in the Internet Explorer browser to increase font size (View > Text Size > Largest).

A safe rule-of-thumb is to specify font sizes that the vast majority of people without disabilities can view without difficulty. The easiest way to do this is to not specify any font size at all. The browser will use its default font size. If developers specify smaller font sizes, it is best not to use values below about 75% or 80% of the original font size. In fact, 85% might be a safer boundary to set, especially for the main text. The actual "allowable" percentage will vary according to which font is being used. Arial will appear much smaller at 85% than will Verdana.

Blinking and Moving Text

Blinking text and moving text are annoying because they distract the reader's attention. This is especially relevant to people with attention deficits or cognitive disabilities. Neither is likely to cause a seizure, but they are likely to decrease the readability of the document as a whole and increase the time it takes for users to finish reading it.

The situation is further complicated if users are required to click on moving text. Users with slower reaction times, tremors, or other motor difficulties may not be able to click on the links accurately.