Email Development
Override Font Resizing on the Android
Email Development
In reading one of Campaign Monitor’s more recent posts: Override the minimum font size on the iPhone and iPad, we had a hunch that this trick might also work on the native Android email client so we decided to investigate a little further.
As a follow-up to our recent post: Become a Pro at designing emails on the Android, we mentioned that the Android client increases your font sizes by approximately 110% and that we didn’t know of a work-around. Well thanks to Brain Thies and Campaign Monitor, we have a fix you can try out!
Here is an example of a layout rendered in Safari on the PC. As you can see, I am making heavy use of TD padding in order to place text over a background image:
Here is an example of the same layout in the Android (horizontal view):
In an attempt to fix the header fonts and the size of the fonts in my content, I added the following code snippet inside the <head> tags of the email.
<style>
* {-webkit-text-size-adjust: none}
</style>
Here is how it looked after the fix.
As you can see my fonts are still not matching up exactly. So I decided to dig even further!
Note: First, I tried * {-webkit-text-size-adjust: 95%} hoping to get an exact representation of what I was seeing in the above example. I learned that the Android doesn’t support a percentage value for this CSS3 property so in order to use this fix, you must use a value of “none.”
Note: By default, fonts on the native Android email client are displayed in Helvetica.
Here are the results of a font test I ran comparing the font I used in the above example (Georgia). In my test, Georgia was the only font in the stack. I compared it before and after the fix and in Safari (on my PC):
As you can see, the Android renders the Georgia font differently which is what caused my initial frustration with the above layout. I tested the Georgia font on the Mac and it rendered very similar to my PC. I might consider following up with some further research regarding which fonts come standard on the iPhone and Android OS but from this research, I am currently under the impression that the Android simply doesn’t have the Georgia font installed.
This is certainly a worthy fix and I definitely recommend it for the Android but I would steer clear of attempting to overlay text on images like my example above because it may not be as precise as you’d like it to be. To be safe, make sure that your design is flexible enough to accommodate for a 3% increase or decrease in your font sizing throughout your entire email and use the fix mentioned in this post for optimal results on the Android.
