Posts Tagged ‘fonts’


Posted on August 8th, 2006

Accessible Fonts; PX Vs. EMs

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

Yesterday I received an email stating one of the websites I 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 will not allow a user to change the font size when a site’s text is set in pixels (note the Firefox browser will).

I have always used px in my 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 (%). I 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 Clagnut’s How to size text using ems.

UPDATE:

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


Posted on October 23rd, 2005

Typetester

Want to test out the look of a bunch of fonts on the screen a the same time? Check out the free online resource: Typetester. It’s an application for comparing fonts for the screen and make website design easier/faster.

Very useful when you need to check or choose a typeface (including the colors of the text and the background) for your next project. The fonts are pulled from your system so there is worry that you will pick fonts you don’t have available.

Highly recommended.