Skip Main Navigation

Accessible Web Design

Fonts

The text in your web page, more than likely, is the reason users visit your website so it's important that the information is accessible. There are two main issues with text and fonts. First, avoid using fixed font types and sizes. Use styles which allow browsers and other tools to easily change sizes. The other issue is with dynamic fonts or text. Ensure that moving, blinking, or scrolling text may be paused or stopped. Some people with cognitive or visual disabilities are unable to read moving text. Movement can also cause such a distraction that the rest of the page becomes unreadable. Screen readers are usually unable to read moving text and people with physical disabilities might not be able to move quickly or accurately enough to interact with moving objects or text.

Example

Use your browser to scale the text below to see the difference between fixed and scalable fonts. In Internet Explorer, select View > Text Size > Larger from the menu. In Netscape 6 or later, choose View > Text Zoom > 150%. If you're using Opera, select View > Zoom > 150%.

Fixed Font Sample

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam.

Scalable Font Sample

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam.


Links

Care with Font Sizes
(http://www.w3.org/2003/07/30-font-size)

up arrow back to top