The following is an unedited extract from my [forthcoming book](http://book.webtypography.net/). I chose this chapter because I felt it would be useful standing on its own. I should point out that this is a very technically-focussed extract, while the other chapters I’ve written contain a much higher proportion of typographic theory.

## The amazing em (and friends)

The web has always been a type-based medium. Cascading Style Sheets joined HTML as a part of the web in 1996, and did so with typographic foundations from their inception. The principal underpinning to those foundations is the `em` unit.

The beauty of the `em` in CSS is that it provides a unit of length which relates directly to font size. Ems remain fundamental to modern web design. As you will see throughout this book, ems enable you to design truly scalable web pages, which is why we are introducing you to them before we go any further.

Ems have a long-standing tradition in typography, where they have typically been used for horizontal measurements. Ems are named after the letter ‘M’ (and pronounced as you would the letter), but are not directly related to the character itself. It is more likely the em was derived from the width of the metal ‘sort’ which held a capital M in moveable type printing presses.


Some metal type
Barbara Hauser

In CSS, the `em` is a general unit of length related directly to font size. We use it to define widths, heights, padding, margins and other measurements in both horizontal and vertical directions – something typographers with a traditional background may find surprising. The `em` unit can also be used to define the font size itself.

The relationship between ems and font size is the same on the web as it is in traditional printed typography. It’s very simple: one `em` is a distance equal to the font size. So if the font size of an element (``, `

`, `

`, `

`, etc) is 16 pixels then one `em` is equivalent to 16 pixels; in an element with 36 pixel type one `em` equals 36 pixels; and for 120 pixel type one `em` is 120 pixels.

Just as in traditional typography, a crucial aspect of the relationship between ems and font size is that it is independent of the font’s design. One em equals the font size whether the typeface is an elaborate calligraphic script, Japanese kanji, or a plain sans-serif. To illustrate the relationship between length and font size, consider these styles:

#box1 {

font-size: 36px;

width: 1em;

height: 1em;

}

#box2 {

font-size: 120px;
width: 1em;
height: 1em;

}

These styles will render like:

M

and

M

Both boxes have a height and width of 1 em but because they have different font sizes, one box is bigger than the other. Box 1 has a font-size of 36 px so its width and height is also 36 px; the text of box 2 is set to 120 px and so its width and height are 120 px.

The fundamental advantage of using ems is that distances, lengths and spaces will all scale proportionately with text size. If your reader adjusts their default text size to better suit their requirements, everything sized in ems adjusts itself accordingly. This effect is particularly useful when relationships between elements on page are tied to type size, for example margins and padding.

As we saw in the prior examples, lengths set in ems are relative to the font size of the selected element. However when setting `font-size` in ems, we do so relative to the inherited font-size, that is to say the font-size of the element’s parent. Consider the following mark-up:

…

…

with the following styles applied:

#d1 { font-size: 16px }

#d2 { font-size: 32px }

p { font-size: 1em }

These will render as:

#d1

This paragraph has font-size set to 1em and inherits a font size of 16px from its parent div

#d2

This paragraph also has font-size set to 1em but inherits a font size of 32px from its parent div

Even though both paragraphs have `font-size:1em` they display different sized text because their parent elements have text sized differently.

## Rem units

In webpages the html element is known as the root element. ‘Root’ is what the ‘r’ in rem stands for.

The `rem` unit was introduced to CSS3 in 2005. It is very like the `em` in that it lets you set lengths relative to font size. The key difference is that rems are not relative to a selected element’s font size, they are always relative to the `` element. By extension, this means that rems are always directly related to the browser’s default text size, which can be adjusted by the reader. This gives us typographers additional precision and ease of use, while still ceding ultimate control to our reader.

If a browser’s default text size is 16px then 1 rem is always 16px regardless of where a selected element might sit in the page or what its context might be. If your reader changes their default text size to 21px then 1 rem will always be 21px. Let’s take our previous example, and set the paragraph font size in rems instead of ems:

#d1 { font-size: 16px }

#d2 { font-size: 32px }

p { font-size: 1rem }

These will render as:

#d1

This paragraph has font-size set to 1rem so it does not inherit the font size from its parent div