Though developer by trade, I think I can talk CSS fairly intelligently with any hardcore designer. But the one thing that always eluded me a bit was the “em” sizing element. I could never find a definitive description of just how the hell they actually worked. Today I put that one to bed, thanks a straightforward article on A List Apart…

Working from a default of 16px, the following styles should give the desired text sizes:

bodytext p {
  font-size:0.875em; /* 16x.875=14 */
}
.sidenote {
  font-size:0.75em; /* 16x0.75=12 */
}

If you want to work with em’s, your sizes are all relative to 16 pixels. Simply multiply the size by 16 to get the actual display size. Be sure to convey your “Well, duh!” reactions in the comments. Update: When it rains it pours. Playing with my newfound logic, I’ve also learned that you can adjust what an em is relative to based on different font-size definitions in nested page elements.

Take this simple example:

<div style="font-size:0.5em">
  <div style="font-size:1.5em">
    What size is this?
  </div>
</div>

The text in between the two div tags will actually work out to be 0.75em (0.5 x 1.5 = 0.75), which is equal to a pixel size of 12 (see quote above). Now I gotta learn to play carefully with these things…