Varying font sizes in Windows Phone 7.5 HTML emails

Question

I've noticed an odd issue testing emails on Windows Phone 7.5 on Litmus email testing service. The fonts appear at varying sizes even though the HTML is exactly the same.

I have three instances of the code below without anything in between. In the first instance the font-size and family appear as expected, but the second and third don't. THey're larger and look like system fonts.

When I remove extra blank spaces between the tags sometimes that affects things, but the header and paragraph tags and their styles are identical.

Code Excerpt:

<h2 style="font-family: 'oxygenbold',Futura,'Gill Sans','Gill Sans MT', Calibri, sans-serif; font-size: 15px; font-weight: normal; line-height: 18px; color: #7C6755; padding: 0; margin: 0;">Headline Goes Here</h2><p style="color:#231F20; line-height:18px; font-size:13px; font-family:arial,sans-serif; padding-bottom:15px; padding-left:0px; padding-right:0px; padding-top:5px; margin-bottom:10px; margin-left:0; margin-right:0; margin-top:0;">Text goes here.</p>

Answer 1

Ah yes, Windows Phone. Supports media queries, does everything else like it's '97.

Windows Phone will use whatever font size it feels is right for <h1>, <h2>, etc so I advise against using those in emails since there is no purpose to SEO emails anyway.

Windows Phone mail only takes <font> tags with a size="#" attribute for font-size, and will ignore any other value you try and set in your style attribute. size="1" is about 10px, size=2 is about 14px, the size jumps get crazier from there.

Also - drop the p tags, though fine in most mobiles they add (unavoidable) terrible margin and padding in the outlooks and outlook.com. Use trs and tds with a font tag instead.

Answer 2

I found that adding a conditional comment for IE and declaring a viewport within resolved issues with Windows Mobile 8 increasing font sizes in my HTML emails.

<!–[if IE]>
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />
<![endif]–>