{"id":1229,"date":"2014-12-10T18:23:53","date_gmt":"2014-12-10T18:23:53","guid":{"rendered":"http:\/\/freshinbox.com\/blog\/?p=1229"},"modified":"2016-08-31T17:24:52","modified_gmt":"2016-08-31T17:24:52","slug":"gmail-on-ios-increases-font-size-on-some-emails","status":"publish","type":"post","link":"https:\/\/freshinbox.com\/blog\/gmail-on-ios-increases-font-size-on-some-emails\/","title":{"rendered":"Gmail iOS App Increases Email Font Size and What You Can Do About It"},"content":{"rendered":"

UPDATE 8\/31\/2016:<\/B> The fix for issue has been updated<\/a>.

<\/p>\n

\nNote: This is different from the Gmail Android email width issue.
For the Gmail Android issue, use a spacer image with min-width<\/a>.\n<\/div>\n


<\/p>\n

Late yesterday Brad form MixMax<\/a> noticed that the Gmail iOS app added a notice at the top of some emails that seemed to suggest that Gmail has started to support Media Queries

<\/p>\n

\"Gmail
<\/p>\n

However on further inspection it appears that the Gmail app on the iPhone and iPad are merely increasing the font size in some emails. <\/p>\n

For the most part, this change has improved the experience on Gmail as it has made previously small fonts legible. However in other emails it has made the experience much worse, primarily by causing lines to wrap and breaking designs.<\/p>\n

Gmail really should just bite the bullet and support media queries just like the iOS and Android email clients. That way, designers can decide on the best font size for viewers on mobile and desktop clients.<\/b>

<\/p>\n

\"Airbnb<\/a>

<\/p>\n

\"BodyShop<\/a>

<\/p>\n

Font size increased by over 50%<\/h4>\n

It appears that the only change is the font size. However from my crude measurements it looks like Gmail increases all font sizes by over 50% which is significant and causes many lines to wrap. This is both for fonts set in px as well as em.

<\/p>\n

Screen Width Dependency<\/h4>\n

I also noticed that not all emails are modified, in fact quite a number of emails such as those from Brookstone and Target were left alone, with tiny text and all.<\/p>\n

I came to the conclusion that gmail applies this change to emails containing any element that is wider than the current viewing window size. For example when viewed in potrait mode on an iPhone 6 Plus, emails with tables wider than 400px triggers the font size change, but when viewed in landscape mode, the email is not modified until the table width is over 700px. Similarly on the iPad the modifications are triggered at approximately 625px in potrait mode.

<\/p>\n

\nDid you know you could create interactive emails with CSS?
\nTry out the Image Carousel for Email Tool<\/a>.\n<\/div>\n


<\/p>\n

A Quick Fix<\/h4>\n

However I noticed some emails such Brookstone were 640px wide yet did not trigger Gmail’s font size changes. After more sleuthing, I found out that if the white-space: nowrap style is applied to text and if increasing the text size would cause the email width to be widened beyond the window width (causing the email to look really bad), that Gmail somehow senses it and backs off on applying the font size change.<\/p>\n

After some experimentation I came up with a snippet of code that would prevent Gmail from applying the font size change to your email. If Gmail’s font size change causes your email to look particularly broken, you might want to try putting this code at the bottom of your email above the closing body tag to prevent the font size changes until you get a chance to make design changes. <\/p>\n

UPDATE 8\/31\/2016:<\/B> The following fix no longer works<\/b> see the updated fix here<\/a>.

<\/p>\n

\r\n<div style=\"display:none; white-space:nowrap; font:15px courier; color:#ffffff;\">\r\n- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -\r\n<\/div><\/pre>\n
If your email is 700px or wider, add 5 or 6 more dashes and spaces to prevent Gmail from bumping the fonts on the iPad. If you have a long email, you might consider putting this snippet closer to the top and adding line-height:0px so it minimizes the vertical whitespace.<\/p>\n
Update May 8 2015:<\/b>
\nAlex Williams (@alexcwilliams<\/a>) discovered that Google (of all companies) uses a similar snippet<\/a> but uses non-breaking space (&nbsp;) instead of ‘-‘ for their Analytics newsletter, which is an improvement from the one above since it doesn’t require you to mess with font colors:<\/p>\n
<div style=\"display:none; white-space:nowrap; font:15px courier; line-height:0;\">\r\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; \r\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; \r\n&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;\r\n<\/div><\/pre>\n
Explanation:<\/p>\n
    \n
  •  The white-space:nowrap with the dashed line creates a line about 500px across that when bumped up in size will exceed 700px causing the Gmail app to not apply the font change.

    \n
  •  The display:none style causes non-Gmail clients to hide the block (Gmail ignores display:none). When the email is viewed in say, a non-Gmail mobile client, it won’t affect your responsive layout.

    \n
  • The font is set to white so the dashes are not displayed when viewed in Gmail. If you have a different color background, set it to your background color.
    \n<\/ul>\n
    As always, after making any changes, test! :)

    <\/p>\n
    \n
    \nSubscribe to the #EmailGeeks Newsletter<\/span>\n
    <\/p>\n