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.
em vs px in the popular email clients
So, 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?
I 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?
