Accessible Fonts; PX Vs. EMs

Aug 8, 2006 | Website Development

All future sites designed by MCGWD will now feature font sizes set with ems. Here’s why:

Yesterday we received an email stating one of the websites we designed wasn’t accessible to the vision impaired. The lady noted she had trouble reading the website because she couldn’t enlarged the text with her browser.

After a quick look she was right. Apparently Internet Explorer (IE6) will not allow a user to change the font size when a site’s text is set in pixels (note the Firefox browser will).

We have always used pixels in CSS to set font size as it gives the web designer the greatest amount of control. However, as the lady above noted, “10% of computer users (as well as non-users) are vision impaired.” Now that can add up to quite a few people to alienate.

Font Sizing Options

There are quite a few options you can set font size with; pixels (px), points (pt), keywords (xx-small, x-small, small, medium, large, x-large, xx-large) and percentages (%). We however choose ems (em). Why? Not only will ems allow users to re-size their text (unlike pixels), they also give more precision then points and keywords offer. Plus you can setup ems to work like pixels.

In modern browsers the default size text is “medium” or 16px. By reducing the base font size to 62.5% ( body { font-size: 62.5%; } ) this takes 16px down to 10px. Thus 1em is now 10px, 0.8em is 8px, 1.6em is 16px, etc. For more information on using ems see how to size text using ems.

UPDATE:

Received an “Atta Guy” award for the accessibility updates we made for the lady mentioned above. Turns out she is Sheila Ashcraft, Commissioner of the Michigan Commission for the Blind.