Web Site Accessibility – Part 2Posted by Chris Garrett / May 27, 2006
Font Sizes Explained
Most web users have different requirements for viewing the web. I personally know several people that increase their font size for one reason or another. As a web developer, it is our duty to ensure that this ‘simple luxury’ is not taken away.
Fonts can be set to pixels, ems, % or keywords. All methods have their place, but some are better than others. Pixels give the most consistency, but lack flexibility for the user, as we will discuss. Keywords are ‘small’, ‘x-small’, ‘large’ etc. Each computer has a default font size setting. Setting text with percentages or ems relates to this default font size -1em is the users’ default font size, which follows that it would also be equal to 100%.
Internet Explorer and Pixel Font Sizes
Good browsers like Firefox let the user resize the text by simply pressing ctrl+ or ctrl- no matter how the font size is specified. IE, however cannot resize text set with pixels, so if you are sight impaired or just have tired eyes you have no control to change it. Setting font sizes to percentages makes the text a percentage of the users’ default size. For example 80% is usually pretty good for paragraph text. Over 100% is used for headings.
The Ongoing Debate
When you start using percentages and ems for your font sizes, your life will become an endless round of bickering and name calling between you and your graphic designer, but be strong. Put your foot down. The design will vary slightly from browser to browser and this will irritate your designer to tears. Designing for the web is all about balance. Balance between the utopian world of Photoshop and the web, with its 4 gazillion web browsers and operating systems that all render a page in their ‘own special way’.
If you let the designer have their way and make you use fixed pixel font sizes, the site will be more consistent to the design, but users will not be able to make the text bigger if they need to. It’s not about you. It’s about the user. Using ems or percentages (even if it is just for the main content area) allows the page to display how the user needs it. It’s just courteous.
Below are some ratios for figuring out the variance between mac and PC from Webmonkey.
If you’re designing pages on a Mac:
Mac em size x 2 / 3 = PC em size.
If you’re designing pages on a PC:
PC em size x 3 / 2 = Mac em size.
More explanations on em
More on Keywords and font sizing