Accessible Web Typography

greenspun.com : LUSENET : MCU - Accessible Web Design : One Thread

I am thinking a lot about Web typography at the moment - and re-aquainting myself with it's complexity. Last week I was asked, "what is the best font to use on the Web for accessibility". Here are some of the issues (substituting the word font - for the more traditional word typeface):

Therefore:
There is no single 'most accessible' font.

But we can say, that fonts like Verdana and Georgia look good on the Web because their design is optimised for screen display.

We can accomodeate operating system diversity by specifying more than one font in style sheets (and when using the deprecated FONT tag) and by specifying a generic font-family if the specific fonts are not available.

Here is an example style sheet that illustrates my points:

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

I have chosen Verdana as my preffered font. But this is a Microsoft font which comes with Win95 and above on PCs - it is not part of the basic fonts set that come with the Mac. Also it is a relatively new font and will not be built into earlier Windows operating systems.

Therefore I have specified Arial for those PC users who do not have Verdana on their systems, and Helvetica (the Mac equivilent to Arial) for those who will be using Macs and don't have Arial or Verdana.

However:
Mac and PC users who have installed Internet Explorer or other MS products are likely to have both Verdana and Arial installed on their systems. So - for the majority of users who visit a page that uses the above stayle sheet they will see the page using the intended font.

Finally, for those who do not have Verdana, Arial, or Helvetica on their machines, I have specified that a 'sans-serif' font should be used.

Discuss



-- Anonymous, March 18, 2002

Answers

I think it's unfortunate that Verdana is one of your font choices. It has a problem that makes it unsuitable for use on the web: the glyphs in the Verdana font appear far wider than in other fonts.

Many authors reduce the font size when they specify Verdana as the primary font, so as to return the text to a "normal" size. This is the problem though. If a reader doesn't have Verdana available, one of the fallback fonts may be used, which will also appear at a decreased size. Since most fonts seem smaller than Verdana, the result may be a font that is far too small to read comfortably.

As you say, Verdana is designed for screen display; however, I don't think it should be used on the web. I would suggest simply removing Verdana from the choice of fonts and leaving the font size at the reader's default.

(I'm fascinated by the articles concerning legislation and website accessibility. Keep up the great work folks!)

-- Anonymous, January 19, 2003


For some time, the Disability Office at the University of Edinburgh have used Comic Sans MS as our in-house 'style'. This is predominantly because both users with visual impairments, and students with dyslexia and other specific learning difficulties, find the letters to be easily identifiable and a good middle-ground between fonts that are too serifed and sans-serif fonts that are too angular and boxy.

However, it's well known that Comic Sans is not regarded as a professional font, nor is it cross-platform compatible. We've therefore been looking into alternatives. Personally I find Trebuchet to be a suitably professionalised alternative but with some of the attractions of Comic Sans inherent in it; but there are very few websites which deal with accessibility that seem to use it. Indeed, the majority have a preference toward Verdana or Arial. Some brief lunchtime research found:

RNIB use Verdana (and recommend sans-serif fonts, no more specific) BDA use Arial (and allow you to completely customize font size/type/colour) Techdis use Verdana Jakob Nielsen uses Verdana Bobby/Watchfire use Verdana The Web Accessibility Initiative use Arial (no recommendations) Cambridge University's Disability Resource Centre use Arial (university-wide) Napier use a small Verdana with Arial as headings (white text on bright red!) Glasgow university use Verdana Sheffield university use Arial

Many designers who are just recognising that people with disabilities should be catered for do tend to focus on screen-readers as being the prime concern; I think it's also noted that people with visual impairments are likely to have alternative, personalised style-sheets set up for their own use on any web page, and so for both of these the choice of typeface may not be as significant. But it's highly likely that people with dyslexia or other processing difficulties do not have their browsers setup to assist them, and given the comparatively large numbers of these people, it's important for designers to take note of the visual appeal of the site, even before we get into the assistive technologies that can manipulate the site.

Further input would be very welcome.

-- Anonymous, March 13, 2003


NB: apologies for the interesting formatting above!

The list was:



-- Anonymous, March 13, 2003

I have written a paper called a "Dyslexic perspective on e-content accessibility" that covers some of these issues.

http://www.techdis.ac.uk/seven/papers/

You can also find my brand new "User Style Sheet Wizard" that can be of use for dyslexic students. (This is being developed as I type!)

You can find this at:

http://www.techdis.ac.uk/seven/wizards/

Feel free to feed back

pete

-- Anonymous, March 16, 2003


Thanks Peter, both myself and our dyslexia advisors appreciate the work very much. Since both the DRC and BDA supply a customizable colour/font scheme, and with the excellent wizard for stylesheets, it would seem that so long as that provision is accessible and helpful, the default font isn't so important; in essence, separating style from structure even further by putting the ball in the user's court.

-- Anonymous, March 19, 2003


Alistair,

Thanks, Most people don't appreciate the power and potiental of user style sheet especially for re-rendering the GUI.

I hopefully will have a greater number of ready-made ones soon and I have a "Favelet - BookMarklet" Javascript button under development that could give users more control. I.e. CLick to turn their style sheet on and off at will.

Pete

-- Anonymous, March 26, 2003


Pete -

Adding a 'javascript button' to do anything is ahrdly going to assist accessibility - 15% of clients don't use Javascript/have turned it off.

-- Anonymous, April 18, 2003


Moderation questions? read the FAQ