As I can’t see a resource anywhere online here is a list for the conversion of pixels into ems for the font-size property:

9px = 0.5625em
10px = 0.625em
11px = 0.6875em
12px = 0.75em
13px = 0.8125em
14px = 0.875em
15px = 0.9375em
16px = 1.00em
18px = 1.125em
20px = 1.25em
24px = 1.50em
28px = 1.75em
32px = 2.00em

I would apply a font size of 100.01% to the body element at the begining of your css stylesheet to make the above values work, like so:

body {
font-size:100.01%;
}

The reasons for this strange value is due to IE’s extreme font resizing bug. More explanation can be found here. The default font size would then be 16px.

It’s a waste of css to apply a font-size to every element on your webpage so try to apply font sizes only when necessary. For example, this webpage has only two sizes of fonts and it’s all in the arial font. You could achieve this with only a minimal amount of CSS:

body {
font-size: 100.01%;
font-family: arial, helvetica, sans-serif;
color: #333333;
line-height: 1.5em;
}

a {
color: blue;
}

a:hover {
color: red;
}

h2 {
font-size: 1.75em;
font-weight: normal;
}

p {
font-size: 0.6875em;
}

That could be all the CSS you need for the whole site.

24

I made this:

For those that use HTML in their life, why not test your memory:

37

Oh, and take a look at this amazing Depth Of Field site, all done with Flash.

Long interview with Adam Curtis about the future of UK TV.