Scalable Fonts in Internet Explorer
The Problem: Internet Explorer and Pixel Sized Fonts
Internet Explorer for Windows has a nifty little accesibility feature: The View > Text Size menu (also available via Ctrl + Mousewheel) lets the user scale the on-screen text according to their preference.
At least thats what its supposed to do. Unfortunately it doesn't work if the web designer has set their font size in pixels. Look, i'll prove it. Change the setting in View > Text Size and watch the paragraph below:
This paragraph's font size is set in pixels, so unlike the rest of the site, it won't scale up and down in IE/Windows.
This isn't true of IE's major competitors - including Mozilla (and its relations, including FireFox, Galeon and Netscape) and Opera, which allow the user to scale the text regardless of how the designer set the font size.
So what? I designed it for text that big!
Its all about the accessibility baby! Lets look at your target audience. Does it include people with sight problems? People who might want to scale the text up or down to make it more readable?
Done right, scalable text needn't break your design. Web design isn't a pixel perfect science - your site will always look slightly different from one browser to the next. Internet Explorer is a great example - the Windows and MacOS versions have entirely different rendering engines. So you need to be fairly flexible to cater for everybody.
Right, I'm sold. How is it done then?
Easy. Simply set your font sizes using a scalable unit. There are many ways of doing this, (percent, ems, points, keywords...) but they don't all work.
Why? I don't want to go into the ins and outs of it all, but it seems that older versions of Internet Explorer and Opera show scalable fonts at different sizes to every other browser in the known universe. If you want to know more, Owen Briggs has done a lot of research into it.
However, there is a way that works. Set the font size to 100% in the body, and then use em's from there in in. For example, on this very site, I use the following code in my CSS file:
body {
font-size: 100%;
}
#mainbody {
font-size: 0.8em;
}
As long as you don't go below 0.8em at any point all should be fine. If you go below that magic number, you'll find that text becomes completely unreadable should you set Internet Explorer's View > Text Size option to Smallest.
Of course this is just the first step…
Once you've got the hang of this, you might want to start taking things to the next level. Font sizes aren't the only thing that can be set in ems. There's borders, margins, padding, width, height…
In fact just about anything in your CSS that can be set in pixels can be set in ems, and anything that you set will scale up and down with the text when you alter the setting in View > Text Size. You can make even your whole site scale if you so wish.
Right, now get out there and have fun em-ing up your websites!