RWD – Typography: The Almighty Em

Posted on: December 1st, 2014 by alemieux 1 Comment

In Ethan Marcotte’s tome Responsive Web Design, he begins setting a simple typography example with the following explanation:

Finally, you’ve probably noticed that the font-size has been set to 100%. In doing so, we’ve simply set our base type size to the browser’s default, which in most cases is 16 pixels. We can then use ems to size text up or down from that relative baseline.

There’s not a lot of explanation about why the base font size is set in a percentage and why ems is the unit of choice. Published in 2011, the book may have come at a time where this was standard practice or just the way Ethan went about doing his thing. There was a pretty popular method of setting the base font size to 62.5%, which makes the base font size 10pt – a nice round number that can be mathematically managed better than 16pt. In order to explore Ethan’s method, we need to understand a few things about the baseline type set in percentages and why ems are better than other units of measure.

Units of Measure

You can specify type sizes in CSS with pixels, points, inches, ems, percents, and other units of measure. It would seem at first glance that when working in a web-related dimension, that using pixels as the primary unit makes the most sense. The reason why we don’t use pixels or points is because they are not scalable – meaning they can’t be resized in all browsers. In IE6 & 7, it was particularly a problem. Most modern browsers can scale pixel-based text, but there are problems with it on mobile devices. If the base font size changes, say from 100% to 120%, pixel-based font sizes will stay the same. Another reason we can’t use pixels is that pixel sizes “aren’t constant – or at least the display of them isn’t. 16px text on an iPhone can be ~60% the size of 16px text on a Macbook.”1

Why not use percentages as the choice unit of measure? Ems and Percents are essentially the same, but scale differently depending on what the base font size is set to. Em-based font sizes tend to become exaggerated when resizing in IE6 & 7 when the base font is not set to percentages. When we define font sizes in percentages, it is a percentage of the body font size. So 150% is 150 percent of the font size, whereas 1.5em is 1.5 times larger.2

About That Em

Em Units Are Scaled

An Em unit is defined as the point size or classically, the size of an uppercase M in any font or slightly larger. Robert Bringhurst, author of the Elements of Typographic Style defines an Em as such:

[t]he em is a sliding measure. One em is a distance equal to the type size. In 6 point type, an em is 6 points; in 12 point type an em is 12 points and in 60 point type an em is 60 points. Thus a one em space is proportionately the same in any size.3

Perhaps that helps us to visualize the Em unit a little better, but it’s the flexibility of Ems. Setting up our baseline font size as 100% and then setting all other elements in Em-based font sizes makes that text relative. If you have all of your type set in pixels, changing the base font size doesn’t cascade and makes the rest of the text relatively update. If you set your text in Ems however, and change the base font size, you don’t have to touch your Em-based font sizes because they are relatively affected by that change.4

In Media Queries, this is pretty powerful. Instead of making individual changes, you can simply change the body font size and be done with it. The scaling that Ems employ allow for quick global changes.

Mathematical Operations

I never paid attention in Math class. In fact, some of the best doodling I ever did was in that class, much to my chagrin. To be perfectly honest, the first time I went through Responsive Web Design, I didn’t fully get the calculations and struggled with understanding why I had to use Ems. Of course, I – like many others – were using pixels for everything. If we can’t use pixel values for responsive design and Ems are a better unit, how do we use them? A handy dandy formula:

target ÷ context = result5

The target is the size of text that you want to use. The context (although it can change) is the base font size, which for our purposes is 1em or 16px. If all of our body text is 100%, which is 1em, which is 16px, what if we want text that is smaller or larger than that? Let’s start with a headline for example. If I have a 24px headline in my design I need to convert that to ems. So, I use the formula above and come up with the following:

24px ÷ 16px = 1.5em

Let’s say that I have some copyright text in the footer that needs to be 10px. Again, using the formula, we get:

10px ÷ 16px = 0.625em

See the Pen Calculating Font Sizes with Ems by alemieux3 (@alemieux3) on CodePen.

Other Considerations

The Rem unit is said to be more reliable than Em, but since Marcotte and others specifically advocate it, I’m sticking with that unit of measure for now. One thing about base font size is that the default 16px browser font size is not a given. Anyone can change their browser preferences and set the font size to anything they want. If they have a hard time seeing, for example, they might set the font to something a lot larger. The ability to zoom text or the viewport in most modern browsers will also alter the look of your type and that’s just a bit of control that you have to give up. One other note is that most web design templates have this system built into it already, like Twitter Bootstrap and others, so if you’re using one of those systems, it’s already built in.

Next time, we’ll look into setting a baseline grid and creating a vertical rhythm.

Footnotes

  1. The Goldilocks Approach to Responsive Web Design. Front design agency. http://goldilocksapproach.com/demo/
  2. Font Sizes in Responsive Design: px vs. pt vs. em vs. percent? Eclipse Web Media. https://www.eclipsewebmedia.com/font-sizes-in-responsive-design/
  3. The Elements of Typographic Style As Applied to the Web: 2.1.1 Define the word space to suit the size and natural letterfit of the font. http://webtypography.net/2.1.1
  4. Why Ems? CSS Tricks. Chris Coyier November 8, 2012. http://css-tricks.com/why-ems/
  5. Fluid Grids. Ethan Marcotte. A List Apart. March, 2009. http://alistapart.com/article/fluidgrids

Tweet this! | Bookmark at Delicious

Tags:

One Response

  1. […] Last time, we talked about the Em unit as being flexible when the body is set to 100%. Now, we’ll turn our attention to vertical rhythm and the typographic scale. […]