Fonts and accessibility in web pages

Background

There are technologies for providing the fonts to be displayed in a web page; for example,  TrueDoc and  OpenType. However, although such technologies have been around for many years now, they are still hardly used.

So, for this article, I will concentrate on the way that fonts are available to most people, on most web pages. In this case, users need to have a font installed on their computers in order to see it in the browser.

How fonts are specified

In the simplest case, if no particular font is specified in a page, then the browser's default font is used. 'Out-of-the-box', the majority of browsers use a serif face like 12 pt Times or Times New Roman for body text, and a monospaced one like Courier or Courier New for any preformatted text. (This can be customised as described in my page on changing default fonts used in your browser. So what you see is not necessarily what any other person will see.)

A method of specifying fonts that works for most graphical browsers is to use font tags around each separate item of text to specify the font face, size and colour. For example, this tag:

<font face="Times New Roman, Times, serif" size="+2"
color="#66cc66">sample text</font>

looks like this: sample text in the page. See this sample page illustrating font tag sizing options.

More recently, style sheets have been introduced. These allow many aspects of how the page displays to be controlled in newer browsers, not just the fonts. The style equivalent of the above could be written:

<span style="font-family: 'Times New Roman', Times, serif;
font-size: large; color: #66cc66; ">sample text</span>

which comes out like this: sample text. (If you are using an ancient browser that doesn't support styles, the font will not look any different from the rest of the paragraph.) See this sample page illustrating font style sizing options

Relative and absolute sizes

In both font tags and styles, it is possible to specify font sizes as absolute or relative values, albeit in different ways.

<span style="font-size: larger;">
<span style="font-size: 120%;">
<span style="font-size: 1.5em;">

<span style="font-size: 25px;">
<span style="font-size: 14pt;">
<span style="font-size: 0.5cm;">

There are several ways to specify sizes using styles, as you can see. But in each case the principle is the same. The relative value is proportional to the usual size for text, whereas the absolute value is an exact measurement, regardless of the usual size set in the browser or style sheet.

(This is a simplification to keep the article manageable in length - if you want more details of how sizes are calculated, try one of the HTML or CSS links on the resources page.

Relative values are, very generally speaking, more accessible than absolute ones (but see the sample pages for how it works in practice). They should take account of any changes the user has made to his/her browser. For example, if Jack has set his browser to show large fonts so he can see the screen without his reading glasses, then a relatively smaller font setting will be proportional to the large size he is used to; but a tiny absolute size will be tiny, which will probably annoy Jack as he reaches for his glasses. And if Jill, who has 20/20 vision and a large screen, chooses to set her default font size to small to get lots of text on the screen at once, then absolutely large text used for headings will waste her screen space, whereas relatively large text would not be so bad.

There is a drawback to certain font sizing methods used in style sheets. Not all fonts (especially those designed for print rather than the screen) look very good at all sizes, and if you are unlucky enough to pick the wrong size, the font can be hard to read. If the font outline doesn't align nicely with the pixels on the screen, then the result can look patchy or broken.

Choosing fonts

There is some debate about the legibility of different typefaces on screen. On paper, a serif font is commonly acknowledged to be easier to read. On screen, the same may eventually be true when everyone has large high-resolution screens, but with average resolutions now, the serifs tend to break up at smaller sizes and therefore sans-serif fonts are often thought to be clearer. Steer well clear of scripts and fantasy fonts if you want your site to be legible - these can be used for design accents, but should never be used for regular text in any quantity (just like on paper).

Having established that, which specific typeface should you choose? Some are specifically designed for use on screen - for example, Verdana, Georgia, and Trebuchet MS - see Daniel Will-Harris' article on  choosing fonts for the screen for example, and this page listing  common Mac and Windows fonts.

For maximum accessibility, you need to supply a number of alternative fonts to cater for users who don't have your first choice - for example, because you have specified a standard Windows font and they are using a Mac or UNIX machine. End up with a "catch-all" generic font - of which two - 'serif' and 'sans-serif', are most commonly used. If you are using styles or font tags, you can use the example lists of common fonts below as the basis for experimentation. Remember that the first font in the list that is installed on the user's machine will be used, so you can alter the order, add and remove alternatives to fine-tune the page appearance.

• Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif
• Georgia, Times New Roman, Times, serif

Verdana and Georgia (and others) come by default with Internet Explorer and some versions of Windows; Geneva is a standard MAC font, Times New Roman and Arial are standard Windows fonts; Lucida is often available on UNIX systems (I am told - I cannot test this myself), and Helvetica and Times are common fonts on many platforms.

Emphasising text

(Here I go into a slight aside, but not entirely unrelated to the matter of fonts.) There are various ways of emphasising text used in web pages - often with less restraint than in printed material. All capitals is very difficult to read for more than a word or two, and should be avoided - not least because it looks like the author can't type properly! Bold and italic are also used - but again, they are difficult to read for sustained passages, and should be reserved for short phrases.

Related information:
Sample pages illustrating  font tag sizing options     font style sizing options