Fonts present one of the most difficult problems to face any designer when dealing with the issue of accessible design. The choice of fonts and readability of pages is made all the more complex by the fact that different groups of users have different and conflicting needs.
To the blind, those who have no usable vision, and the profound dyslexic, those who use screen readers to extract information, the choice of the visual font of the page is of little concern except as it might relate to web design for the sighted.
The low vision user generally will prefer sans-serif (French for without serifs
) fonts. Serifs are the small extensions at the ends of letter forms. Low vision users also may require high contrast between the lettering and the background.
Dyslexic users on the other hand need serif type to help them distinguish letter forms. Consider the example below:
p q b d 6 9 p q b d 6 9
It should be clear that the dyslexic reader would find reading serif type easier than the sans-serif face where the letter forms as distinguished solely by orientation. Readers with no disability also benefit from serifs as they read whole word shapes and serifs tend to accentuate that feature of the word.
There are several solutions to this issue. One is to offer different sets of pages for different readers. This is the approach taken by Vision Australia. This works but can lead to problems with keeping the content of all the various pages in sync with each other; a problem which can be dealt with by means of server scripting languages such as PHP or ASP.
A second approach is to use CSS to design style sheets for different users. Thus the content remains the same and only the presentation changes as needed. Here are two link which will change the style sheets of this page from all serif or all sans-serif type.
As can be seen by changing the typeface with the links above we sometimes must also deal with the fact that different typefaces displayed at the same size will, in fact be different sizes. This could be taken into account in the various style sheets as well as issues such as background and text colour. This is done using JavaScrip styleswitcher.js.
Another issue that arrises in design is that of custom fonts. It is common practice for a company or other entity to use a particular font as a logotype. In addition in recent years there have been fonts developed which are intended to be used in communicating with low vision users. Examples include ClearviewADA and APHont. The issue with these and other custom fonts has been that the user must have the font installed in order to view type in it. This has lead to the unfortunate use of images of type which are often not accessible.
Cascading Style Sheets (CSS) now provides a means of dealing with this issue. The @font-face rule can be used to link the reader with a font not installed on the users system. Unfortunately only Apple's Safari web browser fully support this function at this time and Safari is not accessible in Windows using screen readers at this time. This does work with Safari and VoiceOver on Macintosh computers however and if you are using that platform to view this page the following is an example using both APHont and WMCbraille font.
APHont in bold italic
Using this it is possible to do some interesting effects such as setting type in visual braille (setting type in visual braille) or even in shadow braille (shadow braille). Of course in the case of braille fonts is is only useful in displaying grade one braille for screen readers. To see how this is implemented on this page download the fonts.css file.
It is important to note that there may well be legal issues surrounding the use of @font-face and the embedding of fonts. The licencing for Terminal Design's fonts, apparently including ClearviewADA, seems to exclude redistribution in this way. As this feature become more widely supported it will be much more usable and will result in the lessening of dependence on images which represent text.
Greg Kearney, March 2008
