Tuesday, November 11, 2008

Sizing Text with EMs

EMs can be tricky to deal with.  To sum them up, however, they basically allow for resizing of text in Internet Explorer.  If you set the text to a pixel value, IE doesn't allow for resizing of that text.  It seems obvious why (to preserve your intended designs) but other browsers don't have this rule.
Here are some basic rules:
  • The default font-size at 'medium' on regular browsers is 16px
  • EMs are dependant on their parent element's size
With that said, here is an example of working with EMs:
  • Default browser size: 16px
  • Intended font-size: 12px
  • Value in EMs: 12/16 = .75em
Remember when calculating EMs that the EM inherits its denominator (in the equation) from the parent font size.  The calculation is also based on pixel values.

For further reading on EMs check out the following sites:



No comments: