Copy
A closer look at the pixel, the em, the % and the rem (root em).
Peek at this email in your browser
Type E:

02. The Unit Issue
A cast metal sort.
Above: A cast metal sort for an upper case ‘A’. © Andrzej Skwarczy
 

The pixel or the em – which unit should you use for font-size? And what about line-height, the CSS equivalent of leading? I’m asked these questions often, and whilst my practice has always leant towards the pixel, I decided it was time to review it. To this end I’ve taken a closer look at the pixel, the em, the % and the rem (root em) to consider which of these is the best unit to use for email design and development – starting with the pixel.

 
1: The Pixel.
 
The pixel has always been my unit of choice for font-size, as I’ve found it both consistent and reliable across most email and webmail clients. The font size of the text you’re reading is 13px, and for body text I would advise against setting it any smaller. Indeed, iOS Mail on the iPhone will resize text of 13px and below, increasing it to 14px. You can override this behaviour of course using the CSS property -webkit-text-size-adjust, designating a value of none, but if you do so, you must ensure that your text remains legible for your subscribers. For line-height on body text, I’ve found designating the font size plus a minimum of 6px creates a comfortable amount of space for the text to be read, gradually increasing it as the font size increases (so 19px on a font-size of 13px, 21px on a font-size of 14px etc.), though this can be awkward to maintain consistently over a range of font sizes. For this reason, I’ve started using the percent unit for line-height rather than the pixel, usually designating between 130% and 150% as follows, depending on the font-family:
 
<td style="font-size:13px; line-height:150%;">
 
Using percentages for line-height is really useful, as it ensures that ‘leading’ is consistently proportionate to each of the font sizes in the email.
 
font-size isn’t everything!
 
Typography in Email
Typography in Email
 
It’s worth noting that the visual size of a font is not only affected by the font-size property, but also the font-family property. Both the examples above have been designated a font-size of 30px, but they are clearly different. Once again, this illustrates the importance of testing your email code.
 
Pixel ProsPixel Cons
  
Consistent and reliableline-height is awkward to designate proportionately across a range of font sizes
 
 
Type Anatomy
B.
Upper Case ‘B’
Font: Adobe Caslon Pro.
  1. Stem
  2. Crossbar
 
2: The Em.
 
Unlike the pixel which is an absolute (or fixed) unit, the em is a relative (or variable) unit, in that its size is determined by the font-size it’s ‘related’ to, which in turn has to use an absolute (or fixed) unit. Using the em within email is a two step process.
 
The first step is to define a font-size with a value and an absolute (or fixed) unit for the em to relate to, and this should be specified and styled inside an opening <td> tag as follows:
 
<td style="font-size:13px; line-height:1.5em;">
 
The second step is to style the text within the table cell with the em, inside an opening <span> tag as follows:
 
<span style="font-size:1em;">Your text.</span>
 
The text within the pair of <span> tags styled with the em is now ‘related’ to the font-size in the opening <td> tag, and will therefore render the text at 13px.
 
13px Em  1em
 
You can style multiple pieces of text within the same table cell using the em, and each one will ‘relate’ to the font-size in the opening <td> tag. Here is an example of three pieces of text styled at 1em, 1.5em and 3em respectively, each one ‘relating’ to the defined font-size of 13px:
 
13px Em
 
1em  1.5em  3em
 
What’s clever about the em (and really quite cool), is that you can adjust the size of all the text styled with the em within the table cell, simply by changing the related font-size. Here’s what happens when you change it to 17 from 13:
 
17px Em
 
1em  1.5em  3em
 
Warning! If you don’t define a value and an absolute unit for the em to relate to, you’ll leave yourself to the mercy of the email and webmail clients. When left to their own devices, these are some of the sizes they will render 1em text:
 
Email / Webmail Client1em
(Approx)
  
Apple Mail 6, 7.312px
Yahoo! Mail13px
iPhone 4s15px
Thunderbird15px
Outlook 2002, 2003, 2007, 2010, 201316px
iPhone 617px
 
Em ProsEm Cons
  
Very easy to adjust the font-size of multiple pieces of text within a table cellUsing the em without defining a value and an absolute unit will render it at the email and webmail clients default size
 
 
Recommended Reading
Professional Email Design by Jason Rodriguez.
Professional Email Design
By Jason Rodriguez
 
In Jason’s second book, he looks at the elements of HTML email design, with a whole chapter dedicated to typography!
 
Buy the Book →
 
 
3: The Percent (%).
 
The percent works in the same way as the em, and is as equally well supported. Whilst there is nothing wrong with this unit per se, I’ve a personal preference towards the pixel and the em for font-size, though as I mentioned earlier, it’s very useful for line-height. Here the text is styled at 100%, 150% and 300% respectively, with a related font-size of 13px:
 
Percent %
 
100%  150%  300%
 
% Pros% Cons
  
Very useful for line-heightA value and an absolute unit have to be defined
 
 
4: The Rem (Root Em).
 
The rem was introduced as a way of styling the font-size of text on a web page, by relating it to a ‘root size’ inside the <html> tag. Like the em, you have to define a font-size with a value and an absolute (or fixed) unit as follows:
 
<html style="font-size:13px; line-height:1.5rem;">
 
Relating the size of the rem to the root of the document means you can adjust the font-size of all the text styled with the rem within the entire <body>. This would be extremely useful, were it not for the fact that it’s not supported on a number of email and webmail clients including Gmail, AOL Mail, and Microsoft Outlook (except Outlook 2011).
 
13px Rem
 
1rem  1.5rem
 
Rem ProsRem Cons
  
You only need to define a value and an absolute unit onceIt’s not supported on Gmail, AOL Mail and most versions of Microsoft Outlook
 
 

So, the pixel or the em? Well both actually! For the most part, I’m going to continue using the pixel for font-size and the percent for line-height. However, where there are cases when I’ve a lot of different sized text contained within a table cell, it would make sense to use the em for both. The percent is an option of course, though I would restrict my use of it to line-height. The rem (though I love the fact that you only need to define it once) I do not recommend, unless you know your subscribers only use supported email and webmail clients.

 
 
Type E: is an email newsletter devoted to typography on email, created by Email Designer and Developer, Paul Airy. Please email your thoughts, suggestions and questions to type-e@beyondtheenvelope.co.uk. Thank you for subscribing!
 
 

Beyond the Envelope™
© Paul Airy, 2015
+44 (0) 7962 177 477 (International)
07962 177 477 (UK)
Unsubscribe:
Though I’d be very sad to see you go! :(