Use rems for global sizing, use ems for local sizing

The following is an unedited extract from my forthcoming book. 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.

Photo of a metal sort for an M
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 (<span>, <div>, <p>, <h1>, 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:

<div id="d1">
    <p>…</p>
</div>
<div id="d2">
    <p>…</p>
</div>

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

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 <html> 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

#d2

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

Use rems for global sizing, use ems for local sizing

In rems and ems we have two extremely useful and versatile units which enable us to relate lengths, distances and dimensions to font size. However it is not always obvious when it’s better to use one rather than the other. We’ll be using both rems and ems throughout this book, so hopefully the advantages of each unit will become clear, but as a guideline, use rems to scale something with the page (global sizing) and use ems to scale within a component (local sizing).

Take the example of a pull quote containing two short paragraphs. The spacing between the paragraphs will depend on the size of the paragraph text, so you could feasibly set that spacing in either rems or ems. Should you decide during your design process that the pull quote should be set a bit larger, then the spacing between the paragraphs must also be increased. Therefore the paragraph spacing is directly related to the paragraph text size and therefore be considered local sizing within a component. Hence you should use ems in this case.

As for the paragraph text itself, that does not have any direct relation to another part of the page. It is only related directly to the default text size. Therefore the paragraph text size it can be considered global sizing and thus should be set in rems rather than ems. We will be considering text sizing in much more detail later on.

Ch units

The ch unit was introduced in CSS3 in 2006. It is equivalent to the width of a character, hence ‘ch’. More specifically 1 ch equals the width of the zero (0) character in the current font. This means that, unlike ems and rems which do not change with different type designs, a ch changes as the font-family changes. In the cases where it is impossible or impractical for browsers to determine the width of a ‘0’ (perhaps because the font doesn’t include a ‘0’), browsers will set 1ch to be equal to 0.5em.

The ch unit can be useful if you want to set lengths or sizes which relate directly to the width of the font. For example you might want to set the width of a block of text to be wider for an expanded font, and narrower for a condensed font. Using ch could achieve this automatically for you, for example the following two text blocks both have a width of 34ch but because they use fonts of different widths, the blocks are different sizes.

Typography Should Be Invisible

Typography demands a humility of mind, for the lack of which many of the fine arts are even now floundering in self-conscious and maudlin experiments. There is nothing simple or dull in achieving the transparent page.

Typography Should Be Invisible

Typography demands a humility of mind, for the lack of which many of the fine arts are even now floundering in self-conscious and maudlin experiments. There is nothing simple or dull in achieving the transparent page.

Two text blocks are set to 34ch wide, but the use of a condensed font (top) and an expanded font (bottom) makes the rendered width narrower and wider respectively

CSS includes many more units of length: you may have noticed we’ve omitted to mention pixels at this point, and there are plenty of others we haven’t yet touched upon. Em, rem and to a lesser extent their cousin ch provide us will the primary tools for designing and developing websites which will bend, squash, stretch and most importantly adapt to the whims of our readers and their web-enabled devices.