Improve your web site's accessibility by using percentages for font size

By Donovan Myers
Posted on Nov 26, 2007

Comments (0)

Now that you've weened yourself off of using <font> tags to set the font attributes on your web site, it's time to refine your style sheet even further. It may be easier to just use the point (pt) or pixel (px) size, especially when converting a Photoshop mockup, but if you use percent (%) for your font-size, you'll greatly improve accessibility.

Example HTML:

<h1>A typical page heading</h1>
<p>And some typical page content.</p>
<ul>
	<li>A Nested List Example
		<ul>
			<li>Nested Item</li>
		</ul>
	</li>
</ul>

The body style

I like to set a base font and size for my entire document in the body. Setting the font-size to small is usually a good option because it gives you a default size of around 12px/pt and allows you to specify percentages to increase or decrease the font size.

body {
font-family: verdana;
font-size: small;
}

A heading example

If you set your font-size for the h1 style to 100%, you'll notice something odd. The heading has now shrunk to the same size as your p tag. All of your fonts will now size them relative to the default size (small). If you want your heading to be bigger than your body copy, you'll have to specify a value above 100%. 200% seems like a good amount, and just happens to be what the default size is for h1 compared to p.

h1 {
font-size: 200%;
}

Nesting can get tricky

You may run into an issue where you have tags inside tags; such as a table inside a table or in the example that follows, a nested list. Say you want to set your lists to be smaller than your body copy. If you set the list item to 90% the nested list item then becomes 90% of the 90% of your body copy.

ul li {
font-size: 90%;
}

This isn't a big deal, because you can just tell your nested items to be 100% instead of 90%:

ul li ul li {
font-size: 100%;
}

Nesting items aren't that tricky to fix, but it is something you'll want to make a note of and watch for.

The payoff

So great, you've switched all your pixel based font sizes to percentages and your site doesn't look any different. Well, the real benefit is for one of your visitors that decides to increase or decrease the font size in their browser. Before, if they were using Internet Explorer (pre IE7) they wouldn't be able to increase the font size because you had locked it to a specific pixel size.