Choosing fonts for your website with accessibility in mind

Apr 6, 2011

One of items often overlooked when planning a website is the choice of font, but in a recent project we were challenged on our choice of fonts as accessibility was of vital concern to the client concerned. Their preference was the font “Century Gothic” that has a circular ‘a’ rather than the one more normally found in typefaces, as in print this is easier to read for those with learning disabilities. However, another key audience of the website were elderly, and the Century Gothic font does not provide such clear legibility on-screen. So we researched the pros and cons of  various major typefaces and this post summarises the outcomes of that.

Our standard font choices

Our standard recommendations for on-screen typefaces are:

  • Verdana (when on screen legibility is of prime importance)
  • Trebuchet (when a slightly more interesting style is looked for)
  • Arial / Helvetica (the stalwarts of the typeface world)

Legibility on screen

The reasons the above form our top three is on-screen legibility, Verdana and Trebuchet are both designed with this in mind. When accessibility is of primary importance, Verdana heads the list as it has a slightly cleaner feel than Trebuchet which has some level of ornamentation in its design.

Verdana includes various design features to improve legibility:

  • No serifs
  • large x-height which improves the legibility of lower case letters
  • wide proportions
  • loose letter spacing
  • strong, even weight in all stroke directions
  • Emphasised distinction between similar letter shapes eg. an upper case I has cross beams, while the numeral 1 has a hook and base cross beam, allowing both to be easily distinguished from each other and the lower case L which when viewed in Arial and Century Gothic can appear indistinguishable.

Readability

Slightly different from legibility, which is more concerned about individual letter shapes, readability how quickly and easily a section of text can be read. Studies have shown that it’s not the individual letters that make up a word but a word’s overall shape that is important when reading. Age profile of a site’s audience becomes important here as a younger audience is more familiar and used to reading word shapes in sans-serif fonts (eg. Verdana) whereas an older audience is more used to serif fonts (eg. Times). A study by SURL found that if serif fonts were set at a larger enough size (14pt), an older audience found these marginally quicker to read though still selected sans-serif fonts as more legible.

Availability

Also of vital importance when selecting a typeface is it’s availability on the end-users computer. While technologies and standards are now coming into force to allow a wider selection of fonts, even if they are not present on the end users PC, these all add download time to viewing the website and currently are still lacking wide support.

Verdana, Trebuchet and Arial all have above 99% availability on PCs (see http://www.codestyle.org/css/font-family/sampler-WindowsResults.shtml) and above 98% on Macs except for Trebuchet which trails at 95% (http://www.codestyle.org/css/font-family/sampler-MacResults.shtml). Verdana is also one of the bundled fonts on the ipad.

The font my client was considering only had 87% availability on PCs dropping to a very low 45% availability on Macs, which could cause potential display discrepancies and unexpected overflows when therefore displayed in an alternative font.

Size

As designers we have a nasty habit of setting body text in as small a size as possible. While you may be able to just get away with this in print and targeting a young audience, it’s vital that text on the web is set at a legible size. What classifies as legible varies from typeface to typeface, one of the benefits of Verdana is it can be set at a smaller size whilst retaining legibility.

It’s also important that the design of a site allows a user to adjust the size of text using their own stylesheets or browser controls.

Colour

When setting text it’s also important to consider the colour of both the font and the background. Ensure good contrast and consider issues such as colour-blindness eg. avoid setting red text on a green background. If you have a standard dark colour on a website it’s often worth creating a slightly darker variant for setting text in as colour almost invariably appear lighter when displaying fonts due to the way fonts are rendered on screen.

Read more

If you want to know more about font selection and discover data from surveys and research done into font legibility then the following links, used in my research may be of interest.

Accessibility

Availability

General interest