emailms-officehtml-emailemail-validationemail-client

Text in HTML email not rendering for OL Office 365 for Windows?


When I tested this 2 column layout in Litmus, all looked fine except for Outlook for Windows. This one is explicitly OL Office 365 (Windows 10). I tried to add a height to the paragraph and a background color, but I saw no difference. You can see the little specs where the text is, but it baffles me why it wouldn't fully show up.

Below is my code with MSO conditional statements:

    <!-- ////////////// START TWO COL 60/40 ////////////// -->  
<div class="two-col c-6040" style="text-align:left;font-size:0;background-color:#F2F2F2">
    <!--[if mso]> 
<table role="presentation" width="100%" cellpadding="0" cellspacing="0"> 
<tr> 
<td style="width:60%;padding:10px;" valign="top"> 
<![endif]-->
    <div class="column-lrg" style="width:100%;max-width:310px;display:inline-block;vertical-align: top; padding: 20px">
      <p style="margin:0;text-align: left;">
<h3 style="font-family: 'Taub', 'Taub Sans', 'Source Sans Pro Regular', 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif !important; font-size: 24px; line-height: 30px; color:#141957;text-align: left; ">We  make it easy to <br>
sponsor a retirement plan.</h3>
             <!-- START vspacer -->
<div class="vspacer8" style="font-size:8px;line-height: 8px;clear:both;" aria-hidden="true">&nbsp;</div>
<!-- END vspacer -->
                   <p style="color: #141957; font-family: 'Taub', 'Taub Sans', 'Source Sans Pro Regular', 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif !important; text-align: left;">With SMARTSync&reg; technology your plan is directly integrated with our app. This greatly reduces manual data entry, keep sensitive information safe and enables time-saving automation.</p>
             <!-- START vspacer -->
<div class="vspacer8" style="font-size:8px;line-height: 8px;clear:both;" aria-hidden="true">&nbsp;</div>
<!-- END vspacer -->
<a class="link-blue" style="text-decoration: underline; color: #26328C;font-weight: 600;font-family: 'Taub', 'Taub Sans', 'Source Sans Pro Regular', 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif !important; text-align: left;" href="https://placehold.co/300/0041dc/FFFFFF/png"><span class="link-blue-inner" style="color: #26328C; text-decoration: underline;font-weight: 600; text-align: left;">Download here.
</span></a>

        </p>
    </div>
    <!--[if mso]> 
</td> 
<td style="width:40%;padding:10px;" valign="top"> 
<![endif]-->
    <div class="column-sm" style="width:100%;max-width:250px; height: 100%; display:inline-block;vertical-align: center; text-align: center;">
            <div style="padding:10px;display: inline-block;">
            <div style="padding-top: 40px;">
                <!-- width="170" must take into account padding for Outlook to scale proper // style does not matter  -->
                <img src="https://placehold.co/100/0041dc/FFFFFF/png" />
                </div>
        </div>
        
    </div>
    <!--[if mso]> 
</td> 
</tr> 
</table> 
<![endif]-->
</div>  
<!-- ////////////// END TWO COL 60/40 ////////////// -->
            
        

enter image description here


Solution

  • Some browsers/apps force a minimum font-size by default regardless of what you set. So a larger font-size combined with the 8px line-height you set might lead to the result you posted in your image (i.e. larger letters being cut off by small line-height).

    Try to change line-height to 1em, i.e. same height as the font-size of that element.