Avoid specifying absolute font-sizes unless absolutely necessary; otherwise zooming may be disabled for low vision users, particularly on Internet Explorer for Windows.
If you do need to specify a font size, use a relative font-scale (e.g. <font size="-1"> or font-size: {small} / font-size: {75%} / font-size: {.8em}) instead of an absolute font-scale (e.g. <font size="1"> / font-size: 10pt).
Avoid using fonts smaller than 9 points as they will become illegible on the Mac platform.
Use font faces which more favorable for computer screens such as Verdana, Arial or Georgia.
Avoid underlined text except for links. Users unfamiliar with Web conventions may click on any underlined text.
Avoid using italic text except for short passages or when academic convention calls for it. Italics is particularly difficult to read on a monitor; in some cases, bold face can be used in place italics.
Generally use dark colored fonts on light backgrounds instead
of the reverse since these are more readable.
Note: PowerPoint presentations should be light text on dark when projected
on a screen,
If you need screen readers to distinguish bold or italic text in a different reading style for emphasis, use the STRONG and EM tags for B and I .
If possible, use external cascading style sheets instead of the FONT FACE tag or inline style specifications (e.g. <p style="font-family: Verdana, sans-serif" >). This allows users with certain visual problems to replace your stylesheets with their own custom style sheets tailored for their needs.
Avoid blinking text as it could trigger epileptic seizures in some users and is generally very distracting.
SECTION 508 - Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2 Hertz (cycles per second) and lower than 55 Hertz. (i.e. avoid blinking, especially in the 2-55 Hz range).
Avoid entire text blocks of italic text, colored text, underlined text, decorative fonts and capitalized letters. These formatting choices can make text difficult to read.
One of the more common accessibility errors is to set an absolute font-size (especially for smaller text). This is especially problematic if you use cascading style sheets to set an absolute font-size such as {font-size: 8px} (8 point text).
Absolute font sizes disable the zoom ability
for users in Internet Explorer for Windows (85% of users) to increase the font size of a Web page.
NOTE: All examples say "Ha Ha I don't zoom in IE"
K E H F G C - Ha Ha I don't zoom in IE
<p style="font-size: 10px" > <b > K
E H F G C - Ha Ha I don't zoom in IE </b> </p>
K E H F G C - Ha Ha I don't zoom in IE -
<p style="font-size: 8px"> <b> K
E H F G C - Ha Ha I don't zoom in IE </b> </p >
K E H F G C - Ha Ha I don't zoom in IE
<p><font size="1"> <b> K E H F G C - Ha
Ha I don't
zoom in IE</b></font> </p>
K E H F G C - See me zoom
<p style="font-size: small"> <b> K E H F G C </b></p>
K E H F G C - See me zoom
<p><font size="-1" ><b> K E H F G C </b></font></p>
NOTE: Avoid using {font-size: x-small} since it is often rendered in 8 point on a Mac and becomes virtually unreadable.
To test font-zooming, open a browser and go to the View menu, then Font Size and increase the default font-size.
As a general rule most users are better able to read sans-serif fonts such as Verdana, Arial and Helvetica better than serif fonts such as Times New Roman. Many users recommend Verdana because it was specifically designed to be read on a computer monitor.
Times New Roman is especially problematic because it was designed to be read in print, but does not always translate well to a computer screen, especially at smaller font sizes. Here are some samples for comparison. In some cases you may want to use one font for larger sizes and another like Verdana for smaller sizes.
Verdana (this Web page) and Verdana Small Text - o
Arial (another common Web font) and Arial Small Text - o
Helvetica (another common Web font) and Helvetica Small Text - o
Tahoma (similar to Verdana, but not as common) and Tahoma Small Text - o
Arial Black (best for larger text) and Arial Black Small Text - o
Trebuchet MS (a less common font) and Trebuchet Small Text - o
Century Gothic (an Art Deco inspired font) and Century Gothic Small Text - o
Comic Sans MS (Decorative use only) and Comic Sans MS Small Text - o
Impact (Decorative use only) and Impact Small Text - o
Note: You can use some less common fonts as long as you also specify more common fonts such as Arial and include the "sans-serif" as an option.
There may be cases when you need to use a more traditional serif font. In those cases, you may want to consider Georgia over the more standard Times New Roman because Georgia was also designed to be read on a computer monitor.
NOTE: For both serif and sans-serif fonts, the larger, more distinct and more circular the "o" character, the more likely the font is to be considered legible.
Georgia (designed for computer monitors) and Georgia Small Text - o
Book Antiqua/Palatino (considered somewhat more readable) and Book Antiqua/Palatino Small Text - o
Century Schoolbook/Century (another common classic font) and Century/Century Schoolbook small Text - o
Times New Roman (default, but mediocre) and Times Small Text - o
Decorative fonts, including MS Comic Sans, Impact and other unusual fonts, should be avoided as a default font on most Penn State sites. If decorative fonts are needed for titles they should be restricted to large text sizes only (minimum around 18 pixels/points).
Many accessibility experts recommend using STRONG instead of B for bold face text and EM instead of I for italic text. The reasons for this recommendation are
Screen readers are more likely to recognize STRONG, EM and pronounce them in a different voice or volume.
STRONG, EM are semantic tags meaning that they indicate that the author wishes to provide emphasis which is rendered as bold/italic on a visual browser or in different speaking styles on a screen reader.
It should be noted though that many authors specify bold or italics purely for visual reasons. In these cases, B or I may be better because having a screen reader switch voices without adding true emphasis may be distracting. It is not currently a part of Section 508 policy that all B and I tags be replaced with STRONG and EM tags.
STYLE TAG - From a standards point of view, a stylesheet solution such as <span class="bold" >Bold Text </span > is just as semantically vacuous as <b>Bold Text </b>.
These items should definitely be tagged as STRONG and EM.
Avoid entire text blocks of italic text, colored text, underlined text, decorative fonts and capitalized letters. These formatting choices can make text difficult to read.
Here are the examples to avoid.
All Italics - Avoid entire text blocks of italic text, colored text, underlined text, decorative fonts and capitalized letters. These formatting choices can make text difficult to read.
All Underlined - Avoid entire text blocks of italic text, colored text, underlined text, decorative fonts and capitalized letters. These formatting choices can make text difficult to read.
All Colored - Avoid entire text blocks of italic text, colored text, underlined text, decorative fonts and capitalized letters. These formatting choices can make text difficult to read.
Light Text on Dark Background
Avoid entire text blocks of italic text, colored text, underlined text, decorative fonts and capitalized letters. These formatting choices can make text difficult to read.
All Decorative Font - Avoid entire text blocks of italic text, colored text, decorative fonts underlined text, and capitalized letters. These formatting choices can make text difficult to read.
All Caps - AVOID ENTIRE TEXT BLOCKS OF ITALIC TEXT, COLORED TEXT, UNDERLINED TEXT, DECORATIVE FONTS AND CAPITALIZED LETTERS. THESE FORMATTING CHOICES CAN MAKE TEXT DIFFICULT TO READ.
Site Menu:
Home Page/Main Menu
| Section 508 Guidelines
| Quick Checklist
| Details by Tag
| Links
| I.T.S. Seminar Page
| Sitemap
©1999-2006 Pennsylvania State University.
This Web page is hosted by (by Teaching and Learning with Technology, a unit of Information Technology Services. Please contact the Webmaster if you have any questions.