Sizing With em Values for an Elastic Layout

All browsers have a text-size setting which, when changed, is supposed to scale by a consistent amount all text on the page¹. This text will already have size definitions in the page's source code. Some of these may simply be stated in terms of whatever this browser text size happens to be. This is the case for any element for which the "font-size" CSS property, and that of all its ancestors, is stated in relative terms (for example "larger" or "100%"). Other parts of the text may have their sizes defined in terms of some absolute value in px or pt. This is the case for any element for which the font-size, or that of one of its ancestors, is a px or pt value. When this is the case, the designer will normally have chosen the px or pt value as a good fit when the browser text size is set to medium (default). For these elements, the browser must resize the font for its current text size in a way that looks appropriate amid the rest of the page.

One em unit is the computed font size of the text in an element, which is the vertical height in pixels of the text after resizing 1) as per the element's font-size property and that of each of its ancestors, and 2) to adjust for the browser text-size. Note that em units, which are only ever used when setting an element's CSS properties, refer to the font-height for that element--except in the case where em units are being used to set the value of the font-size property itself. In this case, it refers to the font height in the parent element. This can cause confusion.

The em unit seems to be desired by people so that the font height of an element can be used to size other elements, and so that text can be sized in terms of an absolute value (assuming a browser text-size of medium, as mentioned above) without actually using absolute values like pixels.

The former reason arises from the fact that elements of any sort that were sized using absolute values will have different proportional sizes compared to elements containing text that were sized using relative values (the default) for the different browser text size settings. These absolute-sized elements will not adjust in size at all¹, whereas relative-sized elements will. Intuitively, items on the page should have consistent sizes relative to one another--as in the case of an image running alongside a paragraph of text. When em units are used to set the sizes of elements relative to the sizes of the text in other elements, this becomes possible and the layout is called elastic.

The latter reason arises from the fact that² absolute-sized elements will not resize with the browser's text size; and that relative units other than em only set a size-related property relative to that same property's value in the parent. With em units, we can choose absolute sizes (knowing that browsers have a default text-size of 16px and adjusting accordingly with ems) that resize properly, and we can set the font-size of an element relative to the font-size of the parent, and then use the resulting value to set all other size-related properties relatively.

Representing absolute sizes in ems involves using a value, in ems, equal to the desired size in pixels divided by the relevant element's font-size in pixels. When the property being set is font-size, the relevant element is the parent. For all of an element's other properties, the relevant element is the element itself. For the highest-level element (body), the desired size should be divided by 16px.

Before using em units, we must deal with the fact that IE does not resize text consistently upon a change in the text size setting, scaling em values in a more extreme way than % values. A comment on an entry of the prominent blog at clagnut.com points out that this problem is, for some reason, eliminated by setting the font-size of the html element to 100%.

In Mozilla-based browsers, all heading elements (for example h1, h2) will inherit the font-sizes of their parents. In IE, input, select, th and td elements will not inherit the font-sizes of their parents. The clagnut.com blog recommends using the following CSS selectors to counteract these undesirable behaviours:

H1 {font-size:2em}
H2 {font-size:1.5em}
H3 {font-size:1.25em}
H4 {font-size:1em}
INPUT, SELECT, TH, TD {font-size:1em}

A comment on the same blog entry suggests using the selector table {font-size:100%} in lieu of including the th and td elements in the final selector listed above.

A behaviour to beware of occurs with types of elements that are typically placed inside one another for semantic but not presentation-related reasons. For example l1 elements are often placed inside other l1 elements without the hope that the parent and child will look any different. But if the size of all l1 elements was previously set using ems, the child element will be sized relative to the parent instead of the ancestor element that the em units were meant to refer to. Cases like this are avoided using additional selectors like: LI LI {font-size:1em}.