Using ems to Specify px Text Sizes in CSS

November 16, 2008

Please note!! I have shamelessly stolen this article from my old and (even if I do say so myself) rather boring blog. So please ignore the terrible writing style! I’ll rewrite this article in the future, but until then, I present you with version 1.0

Not a very clear title, I know, but it’s difficult to put across exactly what I mean with only a few words. Basically, this is a simple way to allow for you to specify the exact pixel size of your text using ems. This is useful because internet explorer can’t resize text if it is set with a px height. This is bad not only for people with impaired vision, but also those who use huge screen resolutions and need to resize the font so that they can see the 8px font size which so nicely fits into your design.

It is quite a simple and extremely easy to use trick. The first thing to know is that 1em is set to the default font size for the document (or user’s settings). Well, technically it’s the size of a capital M (hence the name ’em’), but it’s the same thing. So if you change the default body text size to 10px, you can very easily exactly specify other sizes while still allowing IE to resize them properly.

The second and last thing to know is that em is a percentage scale, so to increase the size from 10px (now 1em) to say, 20px you would use a size of 2em. Likewise, to change from 10px to 15px, you would use 1.5em. If find it hard to use percentages, the simple way to do it is to divide the size you want by 10 (notice how 20px changed to 2em and 15px changed to 1.5em

body
{
  font-size: 10px;
  /* now 1em = 10px */
}

p
{
  /* set paragraph font size to 12px using 1.2em*/
  font-size: 1.2em;
}