While using CSS you stumble on ems sooner or later during the development process of a web site. Most developers often ask when and where this length unit must be used and if it's the best length to use in their CSS. Let's get it straight: this length is not the best from a browser point of view. In fact, browsers automatically convert ems to absolute units (usually pixels). But it's from the user point of view that the choice of ems can make the difference.
The length of an em usually refers to the height of the lowercase 'm' letter. This height is calculated starting from the baseline. Ems are said to be relative lengths because their value depends on the font size in use on the affected element or on its ancestor. An example:
#parent {
font-size: 12px; /* 1em = 12px */
}
#child {
width: 10em; /* 10em = 120px */
}
The interesting thing here happens when a user changes the font size of a page: the child element will shrink or expand its width according to the actual font size in use. So if the font size is 10px, then the box will be 100px wide. Conversely, if the font size is 16px, then the box will be 160px wide. And so on. For that reason, a layout that uses ems to specify the dimensions of its elements is said to be elastic.
However, if you let your users to change the default font size, you will probably run into a problem: if the font size in use is too large, your element dimensions will actually grow until the infamous horizontal scrollbar appears on the page. To fix this problem, you can specify minimum and maximum dimensions:
#parent {
font-size: 12px;
}
#child {
width: 10em;
min-width: 120px;
max-width: 200px;
}
Using min-width and max-width actually tells the browser one thing: don't go below or over a certain dimension. Another interesting use case of ems is when you want to prevent text from overflowing its element container when the height and line height of such element changes according to the font size:
#branding {
height: 3em;
line-height: 3em;
text-align: center;
}
In this case, the text content of the affected element will be always vertically centered, because the height and line height are set to the same value and this value changes as the font size changes.
Ems can be combined with percentages when determining the font size of a page. Since pixels are not treated in a scalable way by Internet Explorer, which doesn't allow a user to resize text when the font size is expressed in pixels, web developers have found some font size constants that make use of percentages and ems. These constants are:
| CSS rule | Equals to | Ems |
|---|---|---|
body {font-size: 62.5%;} |
10px | 1em = 10px |
body {font-size: 76%;} |
12px | 1em = 12px |
Example:
body {
font: 62.5% Arial, sans-serif; /* 1em = 10px */
}
#parent {
font-size: 1.2em; /* 1em = 12px */
}
#child {
width: 10em; /* 10em = 120px */
}
Bear in mind that the actual size varies from font family to font family. So ems using Arial are different from ems using Georgia or another serif font. Never forget this when you choose your fonts on an element.