CMXtraneous: CSS

Right on the edge of useful

Scaling Fonts using em units

Posted Tuesday, February 05, 2008 11:05:33 AM by Stephanie


As I train all over the world, one of the issues I try to spend a good deal of time on is helping people to understand the malleable em unit. And how to utilize it for good and not evil. :)

Anyone who knows me knows my burden for accessibility and the em unit is one of the most accessible ways to design. In fact, Greg and I spend a chapter on it in our upcoming book, so I won't go into a lot of detail here. But today, I stumbled upon a really great font-size calculator created by James Whittaker. If you'd rather keep it handy on your desktop, he also created it as an Adobe AIR application.

In reading the comments of his blog post, I saw a couple people questioning the reasoning behind decreasing the default text size of a user at all. And I began to answer those questions with my own opinions. About three paragraphs into my reply, it occurred to me that I was monopolizing James' comments and it was best done as a blog post of my own (please read James' post for the full story).

For the quick back story - the default text size of modern browsers is 16px (that would equal 1em). It's quite common to choose a 12px font-size which is 75% of the default sizing (.75em), as the base font size for elements on your page. (I'm not going to address here whether that should be placed on the body, or on individual elements.) The people responding in the comments were questioning whether we should adjust the base font size (something I've heard for years) since we're taking away "the experience the user expected." My reasoning follows...

The Three Groups of Users

I likely don't have to remind you that back in the days of tag soup, 12px was a very common size to set type to on the web. In fact, even after many developers started controlling their typography with CSS, 12px was probably the most common size to set type to. So saying that people who leave their browser set to the default 16px size want that size is simply not true. They hardly know what it looks like since more often than not, it's overridden by other font sizing and styling anyway. And if they're like the average user, they don't have the inclination to change it either. They can see just fine, thank you. And they use most of their apps with the defaults they ship with (which explains why most of those same people use Internet Explorer -- since it ships with their operating system). They're not upset that you changed their text size since they get what they have always seen and have come to expect.

Now, in the case of a low-vision user, this is not the case. If someone struggles with the issue of low vision and surfs the web regularly, they've probably developed a method of dealing with it. Users with aging eyes, many times instead of changing the base font size of their browser, have simply learned to use menus or key commands to bump the text size up. They change to a more comfortable size when necessary, but sometimes are limited by the fact that the site breaks in some way as they increase their font size. With this 75%/.75em font calculation, they get what they expect because they surf at default sizes to begin with and they still have control as well as a usable site at any size they settle on.

There are the more extreme vision-impaired that change their default browser text to 32px, 45px, or whatever size works for them. If they've changed their default to 32px, using the 75%/.75em size puts them at 24px. They can still use a key command to increase the text size if necessary. They're probably the users that know the most about making your site work for them because they need it the most. I'm guessing a great deal of the web is difficult for them to use (with columns that have one or two words per line, overlapping, elements getting cut off, etc). So though they don't get their initial optimum size (which is, most probably a common occurrence for them since many sites still use pixel sizing), they have the tools to increase the size a bit more if it's necessary.

Now, do not misunderstand me and think that I'm saying that since the very low vision user is the only one that doesn't get what they initially expect, that they're not important. They are and all users and user agents should have access to the content. I'm simply saying that the first two groups, and even part of the third (for the not uncommon pixel-based sites) see what they expect to see. And with em-based layouts, they have the tools to change them--very smoothly giving them a great experience. That's all.

Category tags: Accessibility, CSS, Dreamweaver, Usability