The second solution is the em.
Unlike pixels, users can adjust the text size in their browsers when you use ems.
This is essential because it puts ultimate control in the user's
hands, where it should be (yes, we know you want complete control over your pages, but if some people
can't read the small type, is it worth it?).
The em is a unit that's relative to the size the text would normally be. Thus, if some normal
paragraph <P> text is usually 12 points in size and it's given a font size: 2em,
that means the text will be twice normal size, or 24 points. But if font size: 2em is applied
to <H1> text, the size will be much bigger, because it will be twice what the
<H1> normally is.
In the long run, it's better to use a relative unit like the em rather than an absolute unit like
pixels or points.
A quick tip on using em: Always apply the style on the <FONT>
tag, not on the <P> or <H1> or other tags. Otherwise, some browsers
won't display the em text size as they should, and you'll get inconsistent results. So, make sure to
do this:
<FONT SIZE="3" CLASS="test">
<P>
This is good code.
</P>
</FONT>
and not this:
<FONT SIZE="3">
<P CLASS="test">
This is bad code. Bad, code, bad.
</P>
</FONT>
Em sounds great, but it's not perfect. Using em creates two problems:
- Text size will vary across platforms.
- Internet Explorer 3 for Windows 95 users won't see your text sizes, because that browser
doesn't support em. In fact, it seems to treat ems like points, meaning that those users will probably see
your text in an extremely small format. The Mac version of IE 3 doesn't completely support em either.
What to do, my fellow monkey friends?
Resort to JavaScript. Using a simple JavaScript, you can create a different stylesheet for each platform.
On your PC stylesheets, you can have text size defined as one value of em, and on your Mac
stylesheets, you can have a slightly higher em value. Thus, users will see approximately the same text size
regardless of which platform they're running.
Using JavaScript, you can also make sure no em values are given to IE 3, and
thus get around that problem too.
Ready for the code? Here it is. Copy and paste the JavaScript code into
the <HEAD> of your HTML document
(in place of the <LINK> line you'd normally use to link to the stylesheet).
Here's how it works: The first bit of code checks for any version of Internet Explorer that's less
than 4. If it finds a match, it serves up the stylesheet named ie3.css (which presumably has no font size
specified, but can have other stylesheet information if desired).
The next bit checks to see if the user's machine is a Macintosh and, if so, links to mac.css. Otherwise, for any
other kind of machine and browser, the
stylesheet called win.css is used.
So how do you figure out what em values to use in the two different stylesheets? Use the formulas below, which are based on
the fact that text size on PCs is roughly 33 percent larger
than on Macs.
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.
These text sizes will be similar, but not identical. Specifically, you'll find that text on IE 4 for Windows
is a wee bit smaller. But at least it's better than the very different text sizes we're used to seeing.
Be sure to test your final code on as many browsers and platforms as
you can instead of blindly trusting the formulas.
It's ridiculous that we have to resort to such silly workarounds to fully control text size across platforms.
As I said before, if limited control and inconsistent
sizes don't get in the way of your users' experience of your site, then don't bother diving into
stylesheets and JavaScript to fix a problem that isn't there. But if you do find yourself groaning, and need more text-size control, then I hope this article has added some new tools to your toolbox.
