HTML and CSS Reference
or not we actually use the em unit to define it), or the size of a box that is one em tall and one
em wide. We are not referring to the size (height or width) of any individual characters within
Also keep in mind that user agents provide default sizes for type (which is typically alter-
able by the user via the preferences or settings area of the browser). It is typical (but not
absolutely universal) for a desktop computer web browser to set its default type size to 16 pixels.
In other words, most of your visitors will be using a browser that default to an em square that
is 16 pixels by 16 pixels in size.
CSS establishes seven absolute-size keywords for the font-size property: xx-small , x-small ,
small , medium , large , x-large , and xx-large .
The keywords provide relative font sizes to one another based on a scaling factor of the user
agent. This scaling factor is somewhat of a moving target, as different user agents may provide
different scaling factors. Even the CSS specification changed its recommendation between
versions 1 and 2. (CSS 1 specified a scaling factor of 1.5 going up and .66 going down, but
changed to a more vague “between 1.0 and 1.2” in the CSS 2 specification.)
Because of this, the exact pixel sizes of rendered type vary from browser to browser when
size is specified using absolute-size keywords. If we assume a default ( medium ) em square size
of 16 pixels (like most desktop browsers give us out of the box), we end up with the following
translations to pixel sizes for scaling factors of 1.5 and 1.2:
Note Internet Explorer versions 5.5 and lower assigned the “default” font size (usually 16 pixels) to small ,
whereas most other browsers assigned it to medium . IE 6 solved this issue in its standards compliance mode
(see Chapter 4 for more information on standards compliance mode and DOCTYPE switching), but still displays
improperly when in quirks mode.