I must confess, em sizes in CSS are a little confusing to me. Most of my confusion arises, I think, from the fact the inconsistencies between browsers. Still, I’d like to learn more about them–especially since I use them regularly.

So, what you’re saying is that it’s unwise to set body {font-size: 80%;} upfront? Why is that recommended by A List Apart (I believe)?

If you want the base size of text to be 13 pixels high, you specify 1.3em. Tell me off the top of your head how many ems makes 13pixels when you’ve used 75% instead? :)

The majority of browsers use 16px as their default font size; thus setting font-size:100% in your body tag gives you a base font-size of 16px. 1em now equals 16px.

87.5% 1em = 14px
75% 1em = 12px
62.5% 1em= 10px

Those are good percentages to work with as you know that 1em will be faithfully rendered as it’s an integer. This is especially true in a liquid layout where you may set the width of a div to be 7em.

An example:
if font-size:80%
1em = 12.8px

a div width of 7em = 89.6px, which may cause rounding errors and differences in rendering

Thanks for the write-up. I had snarfed (with permission) some CSS that does this and never really understood what was going on. Now I know.