Should I use em or px when coding for HTML email?

I had this question put to me the other week and realized that I really had no idea how using em for font sizes fared across the popular email clients. The 'Little Miss Best Practice' inside me thought - "Well! We should be using em - it's scalable!". But then again, after years of coding emails, I felt there must have been a reason why I had been encouraged to use inflexible px since Day 1.

The sad fact is, coding for HTML email is not the same as coding for the web. We're forced to cram a lot into a 600px fixed-width layout, we use tables and when font sizes scale up or down, layouts break. Just ask these guys.

em vs px in the popular email clients

Test tableSo, I created a simple test with a 1em/16px baseline (the default in Firefox, IE, Opera and Safari desktop browsers). In these browsers, the em/px equivalents (see table) should appear to be the same size.

However, that consistency goes out the window as soon as you pop this table into an HTML email. The skinny: Different email clients use different baselines, which makes pixel-perfect work near-impossible when using em.

For example, lets start with the webmail set: stylesheets within Gmail, Hotmail and MobileMe make a point of scaling down em sizes from the 16px baseline, regardless of how true our test is in the same browser. However, if this inconsistency isn't obvious enough, there's always the desktop and mobile clients to affirm that there isn't something quite right about using em in email.

First up, the good news for em - Lotus Notes and Outlook use the 1em/16px baseline. However, WebKit email clients (Apple Mail, iPad, iPhone) do like their webmail counterparts and scale down from this browser default - this is because their baselines are 1em = 12px (Apple Mail) and 13px (iOS).

All the while, font sizes defined using px display consistently across all popular email clients, as long as font-substitution hasn't been used. 16px in Gmail = 16px in Outlook = 16px on the iPad. You get the point. Unless you're using a fluid layout for your HTML email (which we don't recommend), you're better off using fixed font sizes.

But hey there, how about readability?

iPhone testI thought you'd ask as much. The answer is that as there's no minimum legible size in most email clients, it's up to us as designers to select a font and minimum size that not only works in our layouts, but is readable under most conditions. My recommendation is to use a minimum font size not less than 12px, keeping in mind that serif fonts often lose their readability at this small end of the scale. When designing for mobile devices, one-column layouts of 480px in width or less benefit from improved usability, or alternately you can use @media queries (as we do with our newsletter).

The iPhone and iPad however, take a different approach to maintaining readability by setting a minimum default font size of 13px (the 1em equivalent on these devices). This means that any font sizes smaller than this will be scaled up. This can cause all sorts of breakage in fixed email layouts and can be overridden, however do this with caution.

Overall, the issues raised above go to show how important it is to link to the web version of your campaign. If all hell breaks loose in the email client, at least email recipients can fall back on some degree of consistency in the browser.

So, after much hullabaloo it looks like my mentor was correct - using px is the way to go when coding for HTML email. This may be offensive to the standardistas amongst us, but then again, we're still using table layouts, eh?

Posted by Ros Hodgekiss

11 Comments

  • jefff
    9th April

    The same goes for line-height property. In the web world, I usually use a number; like 1.5; but I’ve found in email you need to use px for this property as well—lot’s of clients don’t play without it; ahem Outlook 07/10 and Notes.

  • Roy
    10th April

    >jeff
    yeah, line-height is imperative, my golden rule is to have it at least 4px more than font-size for all fonts 10-20px size. I don’t use em though.
    >ros
    interesting article, thank you!

  • Andi
    16th April

    Great articel, thank you. I just was asking myself the same question what’s the best way to define the font-site in emails. I also prefer px but some of my customers want to have the font-size “just like the size in word”:-( Does anyone knows which unit Word is using?

  • Dan
    5th May

    Word uses points, pt, as expressed in CSS.  So, if you would mark-up an email paragraph in ems with inline-styles like this:

    This is an example of BIG text!

    You would indicate points like this:

    This is an example of some normal-sized text.

    That’s the same as ‘Word’ size 12 font, 12 points or 1 pica (http://en.wikipedia.org/wiki/Pica_(typography)).

  • Dan
    5th May

    Oops!  Appears my comment above does not show the mark-up.  Okay, I’ll try again!  Here’s how you would code points with in-line styles:

    12 point-sized text.

    I hope that works.  As said in @Ros’ article, probably a good idea to use px instead of ems or pts, but these points can be handy.

  • Dan
    5th May

    Drat, it’s really not showing my mark-up, even when I put it in code tags.  Well basically, in the in-line style declaration you add the property “font-size: XXpt;”, for instance “font-size: 12pt;”.  That’s what I’ve been trying to say, unsuccessfully.

  • Jake Rayson
    5th May

    @Ros: One of the key reasons for using ems in the first place is, as you mention, scalability. In the world of the web, this really only means catering for Internet Explorer 6, AFAIK all later/better browsers *will* scale pixels.

    Knowing little about email clients, I guess the question is whether they will allow you to scale pixel sized-text. If the answer is yes, then why not pixels?

  • Ross Kendall
    6th May

    When using ems for the web, I don’t rely on the default font baseline being 16px as you do in your example, rather I would specify the default font size for the body and then ems or % for other font sizes relative to that.

    What happens if you specify: body{ font-size:13px; } for an email, and then use ems (such as h1{ font-size:2.46em; })?

    But as Jake Rayson has mentioned, the real question is: Do email clients scale px specified fonts well? (and how does that effect our email designs?)

  • Alex N
    13th May

    Without answering Ross’s question, this seems like misguided advice. As with all clients, you should specify a base font size if you are using ems. Have you tried this?

  • Sven
    16th May

    I recently stumbled upon another problem using em sized fonts.
    A client sent us a template for his upcoming email campaign and i checked its SpamAssassin Spamscore. The test resulted in a score above 4, which i just couldn’t accept. I looked for points that i could change without the client even noticing it, since we were not allowed to change the layout. The most “spammy” point mentioned by SpamAssassin was “RAW: body contains 1 or 0-point font” with a score of 2.6. I searched the mark-up for such small fonts and the only thing that catched my eye was a headline with “font-size: 1.5em” so i switched it to a pt size and re-ran the test.

    Long story short: we could lower the spamscore by 2.6 just by exchanging the 1.5em font-size to it’s pt counterpart.

  • Dimi3
    26th May

    Thanks for such a precise post. It was exactly what I was looking for. Have a nice day!

Sign up for free.
Then send campaigns for as little as $9/month

Create an account