In years gone by, web designers primarily used ems for sizing typography, rather than pixels, because earlier versions of Internet Explorer were unable to zoom text set in pixels. For some time, modern browsers have been able to zoom text on screen, even if the size values of the text were declared in pixels. So, why is using ems instead of pixels required or preferable? Here are two obvious reasons: firstly anyone still using Internet Explorer 6 (yes, those two) automatically gets the ability to zoom the text and secondly it makes life for you, the designer/developer, much easier. The size of an em is in relation to the size of its context. If we set a font size of 100 percent to our <body> tag and style all further typography using ems, they will all be affected by that initial declaration. The upshot of this being that if, having completed all the necessary typesetting, a client asks for all our fonts to be a little bigger we can merely change the body font size and all other typography changes in proportion.
Using our same target ÷ context = result formula , I'm going to convert every pixel based font size to ems. It's worth knowing that all modern desktop browsers use 16 px as the default font size (unless explicitly stated otherwise). Therefore, from the outset, applying any of the following rules to the body tag will provide the same result:
font-size: 100%; font-size: 16px; font-size: 1em;
As an example, the first pixel-based font size in our stylesheet controls the site's title, AND THE WINNER ISN'T… at top-left:
#logo {
display: block;
padding-top: 75px;
color: #0d0c0c;
text-transform: uppercase;
font-family: Arial, "Lucida Grande", Verdana, sans-serif;
font-size: 48px;
}
#logo span { color: #dfdada; }Therefore, 48 ÷ 16 = 3. So our style changes to the following:
#logo {
display: block;
padding-top: 75px;
color: #0d0c0c;
text-transform: uppercase;
font-family: Arial, "Lucida Grande", Verdana, sans-serif;
font-size: 3em; /* 48 ÷ 16 = 3*/
}You can apply this same logic throughout. If at any point things go haywire, it's probable the context for your target has changed. For example, consider the <h1> within the markup of our page:
<h1>Every year <span>when I watch the Oscars I'm annoyed...</span></h1>
Our new em-based CSS looks like this:
#content h1 {
font-family: Arial, Helvetica, Verdana, sans-serif;
text-transform: uppercase;
font-size: 4.3125em; } /* 69 ÷ 16 */
#content h1 span {
display: block;
line-height: 1.052631579em; /* 40 ÷ 38 */
color: #757474;
font-size: .550724638em; /* 38 ÷ 69 */
}You can see here that the font size (which was 38 px) of the <span> element is in relation to the parent element (which was 69 px). Furthermore, the line-height (which was 40 px) is set in relation to the font itself (which was 38 px).
Note
What on earth is an em?
The term em
is simply a way of expressing the letter "M" in written form and is pronounced as such. Historically, the letter "M" was used to establish the size of a given font due to the letter "M" being the largest (widest) of the letters. Nowadays, em as a measurement defines the proportion of a given letter's width and height with respect to the point size of a given font.
So our structure is now resizing and we've switched our pixel-based type to ems. However, we still have to figure out how to scale images as the viewport resizes so let's look at that now.