Sizing Type with Ems

This post is part of a series entitled Better Web Typography that I will be publishing over the coming months.

Ems are a relative unit of measure for type, meaning that 1 em is equal to the current type size. For example, the typical default browser body text is 16px, so writing:

p {font-size: 16px;}

is equivalent to writing

p {font-size: 1em}

If we were to create a paragraph class labelled “subtext” that we would like to display at a smaller size, we could do it as such:

p.subtext {font-size: 14px;}

or

p.subtext {font-size: .875em;}

So how did we arrive at .875 ems? Since em is a relative unit, we need to size the text relative to the our standard paragraph. To do this we take our desired size of 14 and divide it by our default (16). 14/16 gives us .875.

Why Not Just Use Pixels?

Pixels certainly are a lot easier to grasp and allow the designer to retain full control. Unfortunately, by sizing text using pixels we are ignoring user preferences. My grandmother jumped right into the online world in the late 90’s. Even though she’s in her 70’s she enjoys surfing the web, reading the latest news online, finding recipes, and staying in touch with friends and family. Her computer is an outdated thing that she can’t see a reason to replace. Her default text size is bumped up a few sizes from the browser default. When we set text sizes as pixels we ignore this preference for users such as her.

To begin, reset all font sizes to the browser default. If you are using a CSS reset, chances are you are doing this already:

body {font-size 100%; }/*resets all font sizes to browser default*/

With 16px as our base, we can begin to set up our typographic scale (note: the paragraph font size is not needed since it is assumed based on the body size of 100%)

p {font-size: 1em;} 
/* 16px/16px = 1 */'

p.subtext {font-size: .875em;} 
/* 16px / 14px = .875em */

h1 {font-size: 2.25em;} 
/* 36px /16px =  2.25em */

h2 {font-size: 1.5em;} 
/* 24px / 16px = 1.5em */

h3 {font-size: 1.125em;} 
*/ 18px / 16px = 1.125em*/

Sizing text using ems may take a bit of extra thought, but it is well worth the trade off to provide a better user experience. Additionally, sizing text in this way provides us with a strong foundation to create fluid and responsive designs that will look great on a range of devices.

Tools & References