Tutorial Categories:

HTML/CSS JavaScript/AJAX Server-Side Marketing General Comp-Sci

Sizing With em Values for an Elastic Layout

By Justin Poirier

All browsers have a text size setting which, when changed, is meant 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 that the text should reflect when the text size setting is "medium" or "normal", to be scaled when the user has selected another option. This is the case for any element for which the font-size, or that of one of its ancestors, is a keyword like "large" or a px or pt value.

Even when paragraph text has a relative font-size, the designer can predict its absolute rendered size for a medium browser text size setting, because the default size of text on virtually all browsers is known to be 16px1. Therefore there is no fundamental difference in the two methods of defining font-size. Internet Explorer's behaviour would imply otherwise, as its text size setting ignores elements with font-size set in absolute units.

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 refer to the font-height for the element whose style is being defined--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 is seen as useful for two reasons. First, it allows the size-related properties (e.g. height) of any element to be set as a proportion of the computed font size of any other element. Unlike other relative units which always set a size-related property relative to that same property's value in the parent, em units are relative to the font-size property of the element itself. Knowing the ratio between the current and target elements' font-sizes, a size-related property can be set to the appropriate quantity of ems to take on whatever size, proportionate to the target element's font-size, is desired. In the following example the img will inherit the parent's font-size but the ul's font-size is explicitly set to twice that of the parent. In order to have the same height as the 3 line ul, the img's height is set to 6 times its own font height, which is half that of the ul. Note that element types like img have a font-size property even though they don't contain any text.

<img style = "float:right;height:6em" src = "picture.jpg" />
<ul style = "font-size:2em">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>

By using ems to size the img, it will resize in proportion to the text on the page when the user changes the browser text size. A layout whose elements resize in this way is called elastic. This technique should only be used to support the readability of the page when rendered with various text sizes, as providing these renderings is the sole purpose of the setting; the user does not intend to resize non-textual elements when changing the setting. There is a separate feature in modern browsers whereby holding the Ctrl key and scrolling with the mouse wheel resizes all elements. Even when the browser is IE and an element is text sized with absolute units, the element will resize. It should be assumed that the user would use this other feature, and not the text size setting, if they wanted all elements resized.

The second reason ems are used is to size text without using absolute units, since absolute units have the aforementioned problem of not resizing with the text size setting in IE. Note that absolute sizes are chosen with the assumption that the text size will be set to medium. Since we know the base font size of relatively-sized elements is 16px when the text size is medium, we can use relative units with the same level of precision as absolute units, with the added benefit that they will resize properly in IE. ems are a common relative unit to use for this purpose. The quantity of ems to use should equal the desired size in pixels divided by the parent's font-size in pixels, or by 16px if setting the body font-size.

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}.

1 The exception is when the text is relatively sized using keywords like "larger", which would resize the text by an amount dependent on the browser.