Most designers when they think of font sizes will think in terms of px (or pixels). When you're dealing with Photoshop for example, which we do a lot in this course, it is your primary font sizing scale. Whether you set your font to 12px, 48px or 72px, you deal with pixels as your font size.
The problem with this in web design is that px doesn't scale well in some browsers *cough IE6 cough* and if you use px as your font size format, users will not be able to resize the font if that's what they want to do. Now, I'm sure it doesn't come up all that often, but you need to plan for these things.
So, how do we make the fonts scalable? We use em as our size format. The problem here though is that it presents us with another set of problems. We're used to dealing with px and 10 px doesn't equal 10em. The scale is some thing like 16px = 1em. So, as long as you're dealing with multiples of 16 you're fine. Issues arise though when you want 12 px for example. I know, I know... that would be 0.75em. That sounds easy enough right? Well, it's about to get a whole lot easier.
I learned this technique from one of the Sitepoint books, either "The Principles of Beautiful Web Design" or "The CSS Anthology" from memory. It works like this. Set the font size in your css files body element to 62.5%:
body {
font-size: 62.5%;
}What this does is give you the ability to use your pixel sizes, divided by 10. As an example, 16px becomes 1.6em. 32px would become 3.2em, and so on and so forth.
It is a very useful and handy technique that will save you plenty of time in the long run as you can just use the px sizes that you're so familiar with and then divide by 10. Simple huh!
Have a good one,
Tim.
