Accesibility & Font Size

[southplatte]

Hello all,

I have recently been working on a site design, and unfortunately cannot link to it as it contains proprietary information that has not been released, that has been commissioned to be accessible by a certain group of their target market.

The group falls into the baby boomer age range and has lower quality vision (glasses, frequently bifocals).

I originally set the font to 12pt Geneva, Arial, Helvetica, sans-serif using CSS. The client then requested that the font be enlarged, so I went to 14pt in the same family.

After further review, the client has requested that the site be set to 16pt fonts on all body text.

My response, as a developer, was that if the group they are discussing is less than 50% of their target market, the larger fonts for all users of the site may detract from it. However, if the group is a majority of their users, it may very well be the idea to enlarge the font.

Also, I am not sure what resolution my client is using to view the page in, but standard design conventions that I follow are to design to 800 x 600 and have no horizontal scrolling. The text at 14pt on this resolution is quite large. At 16pt the site becomes unreadable to standard audiences. I suggested that they try viewing the site at the 800 x 600 resolution to verify the text size, as most computer users with vision problems will run 800 x 600 or even 640 x 480 to enalrge the content on the screen. Am I wrong in that area?

As an end question, what are the typical font settings for accessible web sites? Is there a general size and font family that should be used?

I know I could dynamically change the font size using CSS per the visitors preferences, however, I am not sure that the client wants the users to need to change the site for their needs.

Any insight or help is greatly appreciated,

[Webnauts]

From the accessibility and usability point of view, it is recommended to use as a minimum font size equal with 12px.

Text sizing must read!

Pixels... IE PC doesn't resize text. Example: body { font-size: 12px; }

Em... IE PC displays unreadable small text when user browser is set to smaller and em is less than 1. Example: body { font-size: 0.80em; }

Percentage usually works. Example: body { font-size: 80%; }

Keywords usually works. Example: body { font-size: smaller; }

Here is a table of font sizes:

100% = 1.0em = 16px = 15pt
95% = 0.95em = 15px = 14pt
90% = 0.9em = 14px = 13pt
85% = 0.85em = 13px = 12pt
80% = 0.8em = 12px = 11pt
75% = 0.75em = 11px = 10pt
70% = 0.7em = 10px = 9pt
65% = 0.65em = 9px = 8pt

Some resources for further reading:

Care With Font Size: http://www.w3.org/2003/07/30-font-size

Font sizes: http://hotwired.lycos.com/webmonkey/...html?tw=design

Using relative font sizes: http://diveintoaccessibility.org/day...ont_sizes.html

Accessible web text - sizing up the issues: http://www.mcu.org.uk/articles/textsize.html

Font size: the 'font-size' and 'font-size-adjust' properties: http://www.w3.org/TR/REC-CSS2/fonts....ont-size-props

What's wrong with the FONT element? http://www.mcsr.olemiss.edu/~mudws/font.html

Size matters: http://www.alistapart.com/stories/sizematters/

Making Text Legible: http://www.lighthouse.org/print_leg.htm

If you have any further questions, please feel free to post the.

[southplatte]

Webnauts,

Thank you for such a wealth of information you responded with. I found it extremely helpful and insightful.

Again, thank-you and have a wonderful day!

[greeneagle]

southplatte,

Yes there is a potential for usability issues viewing CSS controlled fonts because IE does not rerender CSS fonts like the depricated. CSS fonts do not respond to the "View - Text Size" browser command.

A good way around that problem is demonstrated on every single WPW page!--- check out the "Adjust Font Size" selections at the very top left hand corner of this page, in the green bar.

Using 3 different CSS sheets it again becomes viewer selectable, making your page more comfortable for a larger viewing audience.

Ken