Community Forum

Over the years we have built up a community of email marketers, coders and designers that live and breathe email.

Use the Email on Acid Forum like your virtual water cooler: Stop by to discuss email code, quirky clients and fixes and post your issues (with an example of the code) for our community to offer its assistance.

 
   
Outlook (Word HTML versions) Font Size Issue

Chris.Ducharme

Newbie
Total Posts:  18
Posted: 16 February 2016 08:32 AM

Hi all,

I’m having a strange problem with MS Outlook 2007, 2010, 2013 and 2016.  The versions of Outlook that use Word’s HTML Rendering Engine.

Outlook will not respect a font size less than 12px.  If I have text that needs to be 10 px or 11 px in the header or footer Outlook renders this out as 12 px.  I am noticing that any font size I set via css / inline styling less then 12 px gets ignored, anything higher gets honored. 

It is crucial that I get Outlook to reflect the font size correctly for line endings.

I have spend hours playing with the code and Googling and haven’t found anything that works yet. 

I have tried adding “-ms-text-size-adjust:none;” to the inline styling.  Using “!important”.

I have found mention on google that custom web fonts may cause this issue (But I am not using any.  Standard email safe font stack starting with Arial is used).

Has anyone ever encountered this issue and may have figured out what is causing it and what a work around or fix might be?

Thanks,

Chris


 

Alex Ilhan

Avatar
Administrator
Total Posts:  223
Posted: 16 February 2016 08:55 AM
[ # 1 ]

Hey Chris,

First of all, welcome to the forums!

Could you please post your code? You can attach it to your post as a .html document so I can have a look and see what’s going on under the hood.

Many thanks!
Alex


 

Chris.Ducharme

Newbie
Total Posts:  18
Posted: 16 February 2016 09:06 AM
[ # 2 ]

Will do.


The email is built using this fluid hybrid tutorial:  http://webdesign.tutsplus.com/tutorials/creating-a-future-proof-responsive-email-without-media-queries—cms-23919

<body style="margin-top:0 !important;margin-bottom:0 !important;margin-right:0 !important;margin-left:0 !important;padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;background-color:#ececec;" >
    <
center class="wrapper" style="width:100%;table-layout:fixed;background-color:#ececec;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;" >
        <
div class="webkit" style="max-width:612px;margin-top:0;margin-bottom:0;margin-right:auto;margin-left:auto;" >
            <!--
[if (gte mso 9)|(IE)]>
<
table width="612" align="center" style="border-spacing:0;color:#333333;" >
<
tr>
<
td style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;font-family:arial, helvetica, sans-serif;" >
<!
[endif]-->

            <
table class="outer" align="center" bgcolor="#FFFFFF" style="border-spacing:0;color:#333333;Margin:0 auto;width:100%;max-width:612px;" >
                <
tr>
                    <
td class="one-column" style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;font-family:arial, helvetica, sans-serif;" >
                        <
table width="100%" style="border-spacing:0;color:#333333;" >
                            <
tr>
                                <
td class="inner contents" style="font-family:arial, helvetica, sans-serif;padding-top:10px;padding-bottom:10px;padding-right:1.2em;padding-left:1.2em;width:100%;text-align:left;" >
                                    <
class="h1" style="Margin:0;font-size:11pt !important;font-weight:normal;line-height:13px !important;Margin-bottom:15px;color:#85776e;" >Lorem ipsum dolor sit ametconsectetur adipiscing elitsed do eiusmod tempor incididunt ut labore et dolore magna aliquaUt enim ad minim veniamquis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequatDuis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariaturExcepteur sint occaecat cupidatat non proidentsunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                                    <
class="h1" style="Margin:0;font-size:11px !important;font-weight:normal;line-height:13px !important;Margin-bottom:15px;color:#85776e;" >If this message is not displaying properly, <a href="#" target="_blank" style="color:#252772;text-decoration:underline;">click here</a>.</p>
                                </
td>
                            </
tr

Here is a piece of code from the body tag through the header text which is being sized incorrectly in Outlook.  I replaced the first Paragraph with Lorem Ipsum text in this example. 


I Just noticed that if I use pt Outlook is going smaller with the font, however still rendering it out about 2 px larger than all other clients.  So I’m wondering if keeping 11px and a conditional comment for Outlook for something like 9pt might be a work around.


 

Chris.Ducharme

Newbie
Total Posts:  18
Posted: 16 February 2016 09:13 AM
[ # 3 ]

Nope, that work around idea didn’t work.

Changing to Point and only using point works.  But If I have the 11px and a conditional comment for outlook for 9pt the font size renders larger than before. Looks more like 14px. 

Same can be said with using the <font> tag in a conditional comment and using size=“1”.  All sizes render out the same size which looks like 14px here as well.


 

Alex Ilhan

Avatar
Administrator
Total Posts:  223
Posted: 16 February 2016 09:26 AM
[ # 4 ]

Hey Chris,

I’m going to investigate this further, could be a variety of different issues. It’d really help me investigate this if I could see the full code, you never know what could be hidden in there causing issues.

I have a feeling it could be the use of paragraph tags, but I’ll have a further look into this.


 

Chris.Ducharme

Newbie
Total Posts:  18
Posted: 16 February 2016 09:38 AM
[ # 5 ]

The footer text is also having the the same font size issue.

Also, the inline styling is done by inliner.cm and I’m working from a external stylesheet if that could some how be contributing to the problem. 


Trying to see if I can attach the html file as the code is to my characters for this message to accept.

File Attachments
inline.html  (File Size: 34KB - Downloads: 372)

 

Alex Ilhan

Avatar
Administrator
Total Posts:  223
Posted: 16 February 2016 09:58 AM
[ # 6 ]

Thanks for the code sample Chris.

When I run this through our testing software I’m seeing the correct (small) font-sizes on Outlook 2007 and other word-powered Outlook versions.

Could you perhaps link me to your tests where the font-size was larger so I can see the issue?

Cheers!


 

Chris.Ducharme

Newbie
Total Posts:  18
Posted: 16 February 2016 10:04 AM
[ # 7 ]

Certainly.

Here is the URL: https://www.emailonacid.com/app/acidtest/display/summary/KHUfBoV6Gl0UqpJ1TqJkFjfCZq2Dg8yHdYptBJrxe5SNo

Here you will see the URL in the header is being forced down to the next line thus causing the first paragraph to extended from 4 lines to 5 and orphaning a word. 

In the footer “Census” gets dropped to the next line.  To keep it on the same line I have to increase the table’s width by about 30 pixels.


 

Chris.Ducharme

Newbie
Total Posts:  18
Posted: 17 February 2016 07:47 AM
[ # 8 ]

I was playing around with the idea of it might be the an issue with the Paragraph tags.

While that didn’t solve the issue, I did notice something stranger.  If I remove the tag and just have the text in the TD tag with the inline styling for font size declared on the TD tag the font is even larger.  14 or 16 point. It remains this size no mater what size I set it too.

Also tried playing around with using the <font> tag trying things like <font size=“1”>.  This also resulted in a 14 or 15 pt size font, and it was always the same size whether I used size 1, 2, 3 and so on.

This is a real puzzling one. 

I have made sure there are no font size decorations on the body, container, table and that the first and only font size declaration for the header text is the one I declared, so I can’t figure out where it could be inheriting a different size or what it might be conflicting with if anything.

What’s even stranger is it appears random.  I can declare size 11 px font or smaller in other table rows in the same table and have it sized correctly in outlook.  There is no difference on the inline styling on the TR and TD tags and I have the same exact inline styling on the P tag.


 

Chris.Ducharme

Newbie
Total Posts:  18
Posted: 17 February 2016 08:59 AM
[ # 9 ]

Solved the Issue.  It was related to !important.

If it is set on any of the inline styling in the P tag or the TD tag in this section the font size is not respected. 

However, without the !Important on the line height and font size the Gmail App auto resizes this text much larger than intended and breaks the whole email layout.  The header text looks right and the rest of the email the font is to small to be legible and the word wrap on paragraphs looks like the body is wider than desktop.  Graphics also look incredible small. 

Going to see if I can hide the tags with !important on them from outlook and then use a conditional comment to load them without the !important just for Outlook.  That looks like the only solution to this situation.