EMs
If you understand how percentage sizing works, then you shouldn't have any trouble comprehending relative sizing using ems. In fact, where font-sizing is concerned, an EM works exactly like a percentage; it is really just another way to represent a percentage font size.
Here are a few examples to illustrate this:
p { font-size: 1em;} /* equivalent to font-size: 100% */
p { font-size: 2em;} /* equivalent to font-size: 200% */
p { font-size: 1.5em;} /* equivalent to font-size: 150% */
p { font-size: 0.74em;} /* equivalent to font-size: 74% */
p { font-size: 0.50em;} /* equivalent to font-size: 50%*/
An em is always relative to the font
size of the parent element, regardless of the CSS property. In contrast, a percentage
can be relative to a different parameter depending on the CSS property. We will
discuss this further when we explore the box model in week five.
- CSS defines 1em equal to 100% for font sizing.
- As with all units, there is no space between the number and the word em.
- It is always em, not ems, even if the number is larger than one em
- For em sizes smaller than 1em, the leading 0 is not required, but I find it easier to see the decimal point that way. Just don't forget the decimal point before the number! (smile)
Most people who have a typography background prefer ems over percentages because the term em originates from typography. Also, EM is easier to type than % [Shft+5]. For font-sizing, there are no fundamental differences between font-sizing in ems and font-sizing in percentages—either can be used interchangeably ... well, except ...
IE6/Win and earlier exhibit a bug that is triggered when text is sized using only ems. Text sized in ems will display incorrectly sized, often too small to be legible.
Read this
rant
for more details.
... as you can read from the sidebar at the right, IE6/Win and earlier versions have a bug that causes fonts sized in em to be overscaled. In other words, fonts larger than 1em are too large, and fonts smaller than 1em are too small. However, this issue only exists for text with ancestors that have not inherited a font-size expressed as a percentage.
The fix is simple: specify a percentage value for the font size of the BODY root element, e.g.
body { font-size: 100%; }
Thus, all elements will have an ancestor whose font size has been expressed in percent. The designer is then free to use ems as desired for the rest of the document.
The following example is merely a duplication of the last example of percentage sizing, with all the percentages replaced by EM equivalents.
Set the baseline of the root element:
body { font-size: 0.84em; }
p { font-size: 1em; }
p.user { font-size: 1.25em; }
p strong { font-size: 2em; }
p span { font-size: 0.74em; }
Example Rendered by Your Browser
View the em-scaled example rendered by your browser. A side-by-side comparison of this example with the 84% scaled example will reveal that they are identical.
In the BODY rule, I declared font-size: 0.84em to illustrate that this a completely legal declaration, and in fact works for all non-IE/Win modern browsers. However, as noted above, I recommend that the BODY element be sized using a percentage value in order to circumvent the IE/Win 'em sizing' bug.