Fonts

Whether it is merely personal preference or necessitated by a visual impairment, individuals may view pages using fonts or color schemes other than those originally intended. Using the depreciated <FONT> element along with its associated attributes (font-face, color and size) may make accessing your information difficult or impossible for individuals who are color-blind, screen-reader users, individuals with low-vision, users of some hand-held devices, and individuals using a monochrome display.

Fixed font sizes may prevent some users from being able to access your information. Increasing the font size alone is often inadequate for users with low-vision. Visitors should be able to vary the size of the display font and have the information remain clear and accessible.

REQUIRED:

Avoid deprecated features of W3C technologies. [W3C WCAG 1.0, Checkpoint 11.2, Priority 2]

Use relative rather than absolute units in markup language attribute values and style sheet property values. [W3C WCAG 1.0, Checkpoint 3.4, Priority 2]

• Do not use the depreciated <FONT> element. Instead, use embedded or external Cascading Style Sheet references applied to other elements such as headings (H1-H6), body, div, span, p, etc., to format the display of fonts on your pages.
  
  
• Always specify font sizes in relative rather than absolute units because these are relative to the user's default settings. These include: em, percentage, and keywords such as larger or smaller. Do not use absolute descriptors such as pixels (px), point (pt), or keywords such as: xx-small, x-small, small, medium, large, x-large, or xx-large.
  
  
• In addition to naming your preferred font family types, such as Verdana, Arial, Geneva, etc., always specify a generic font family such as serif, sans-serif, cursive, fantasy, or monospace. These provide a way to help preserve the intent of your design if the visitor to your site does not have the fonts you specified in your style references.
  
  
• Always ensure that the contrast between the text and its background is significantly high at all color depths. Check your colors using different browsers and platforms, and in monochrome display.

EXAMPLE:

Style sheets allow font-size to be defined in a number of ways. Below is one example:

In the associated stylesheet:

.mytxt
{
color: #333333;
font-weight: normal;
text-decoration: italic;
font-size: 140%;
font-family: verdana, arial, sans-serif;
}


In the code for the page:

<span class="mytxt">Contact Us</span>