em's and relative font sizes Options

[*mipadi*]

I was designing a website for work the other day that showed data that was being dumped into a database. I set the text size to scale from a base size of 13px and designed many elements with this in mind. The page looked great so I sent out the URL to the department who would be using it.

I got a call today from a woman in that office, complaining that the text size was too small. I checked the font size again: It was 13px, which is hardly "small"--to me, at least.

That's the key: to me, it was a perfect size, but to the user, the text was unreadable. Of course, other people in her office liked the layout. So what could I do? Bump up the text size and annoy other people? Leave it the way it was and annoy her? Or was there a solution that would please everyone?

There was, in fact.

I was reminded of a W3C tip I got when validating an XHTML 1.1 page. It encouraged the use of em's. em's are a type size unit, like px, but em's are relative (scaled to surrounding text), rather than absolute (a fixed size, like pixel measurements).

Here's an example: I have my browser set to a default size of 14 pt. in the browser settings. That means that a page initially has a default text size of 14 pt.; thus, 1em = 14pt, in CSS terminoloy. Say I make a DIV, though, that uses a text size of 12px. Now, 1em = 12px, so if I set a font to, say, 0.9em, the font will be sized as 10.8px.

The great thing about em's, though, is that they scale to a user's preferred settings. A person with poor eyesight might set a default size of 18pt. Thus, text on his page, if not specified by a size, will show up as 18pt by default--perfect for his tastes and needs.

So in the case of my page, changing the default size of text (through CSS) to 1em, and specifying all font sizes in em's, means that proportionally, the fonts will be the same size relative to each other, and relative to the user's default settings. So a person with poor eyesight can bump up his settings to see type more clearly; a person with sharp vision or a large screen can bump his settings down so he can see more text per screen. And thus, you've pleased all your viewers!

The downside is that you can no longer use fixed font sizes. For example, I really like Verdana 13 for webpage text, as seen on my webpage. Of course, specifying with em's might mean I'll see it as Verdana 13, but someone else might see it as Verdana 18, and another might see it as Verdana 11, depending on settings. Using em's, then, requires the designer to keep in mind that not everyone will view the page with the same font size settings.

Of course, the benefits of using em's, especially in terms of accessibility, outweigh the problems of my personal taste not being displayed to everyone.

Still, using em's is an excellent idea that any web designer should use. I, for one, am working on converting my stylesheet over to one that uses em's, rather than fixed font sizes.