Create a Discussion

Windows 10 Mail Bolds ALL Text. Even emails from Litmus!

Joshua Eanes posted 2017-04-26 22:42:16

What is causing the bolding of all text in some Win 10 emails?

I see it in about half the emails I get in Windows 10. I've coded some templates and didn't notice it, but every template I've coded lately has been affected by this.

Does anybody know anything about this?

Tomorrow, I'm going to attempt to find the culprit. I'll post back the findings.

Kevin George replied 2017-04-26 08:52:34

Hi Joshua,

Can you please send us HTML source code, so I get exact idea and I will help you.

Waiting for a reply.

Thanks
Kevin

Reply to Kevin George

Joshua Eanes replied 2017-04-26 13:38:54


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta charset="utf-8" /> 

<meta name="viewport" content="width=device-width" /> 
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="x-apple-disable-message-reformatting" />  
<title></title> 
<link rel="stylesheet" type="text/css" href="styles/main.css" />

<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">

<style type="text/css">


html,
body {
  margin: 0 auto !important;
  padding: 0 !important;
  height: 100% !important;
  width: 100% !important;
}

.small-text {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

table,
td {
  mso-table-lspace: 0pt !important;
  mso-table-rspace: 0pt !important;
}

table {
  border-spacing: 0 !important;
  border-collapse: collapse;
  table-layout: fixed !important;
  margin: 0 auto !important;
}
table table table {
  table-layout: auto !important; 
}

img {
-ms-interpolation-mode:bicubic;
}
</style>

<style type="text/css">
    /*                              CLIENT SPECIFIC STYLES                               */
/* --------------------------------------------------------------------------------- */
#outlook a{padding:0;} /* Force Outlook to provide a "view in browser" message */

p,a,li,td,blockquote{mso-line-height-rule:exactly;}  /* Make Outlook obey lin-heights */

img{-ms-interpolation-mode:bicubic;} /* Allow smoother rendering of resized image in Internet Explorer */

/* iOS BLUE LINKS */
a[x-apple-data-detectors] {
  color: inherit !important;
  text-decoration: none !important;
  font-size: inherit !important;
  font-family: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
}

body { 
  background-color: #FFFFFF; 
}

.hide-on-desktop {
  max-height:0;    
  display:none;    
  mso-hide: all;   
  font-size: 0;
  line-height: 0;
}

/* MEDIA QUERIES */

@media screen and (max-width: 640px) {

  .email-container {
    width: 100% !important;
  /* margin: auto !important; */
  }


  .fluid {
    max-width: 100% !important;
    height: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .stack-column,
  .stack-column-center {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    direction: ltr !important;
  }

  .stack-column-center {
    text-align: center !important;
  }

  .center-on-narrow {
    text-align: center !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;
  }
  table.center-on-narrow {
    display: inline-block !important;
  }

  td.show-on-mobile{
    display: table-cell !important;
    max-height: none !important;
    overflow: auto !important; 
    font-size: 16px !important;
    line-height: 28px !important;
  }

  table.show-on-mobile{
    display: table !important;
    max-height: none !important;
    overflow: auto !important; 
    font-size: 16px !important;
    line-height: 28px !important;
  }

  .hide-on-mobile{
    display: none!important;
  }

  .reset-padding {
    padding: 0!important;
  }

  .add-40px-padding-sides {
    padding-right:40px!important;
    padding-left:40px!important;
  }

  .add-20px-padding-top-bottom {
    padding-top:20px!important;
    padding-bottom:20px!important;
  }

  .add-20px-padding-sides {
    padding-left:20px!important;
    padding-right:20px!important;
  }

  .add-10px-padding-top-bottom {
    padding-top: 10px!important;
    padding-bottom: 10px!important;
  }

} /* END MEDIA QUERY */

@media screen and (max-width: 500px) {
    .hide-on-mobile-500{
        display: none!important;
    }
}

@media screen and (max-width: 400px) {
    .hide-on-mobile-400{
        display: none!important;
    }
    td.show-on-mobile{
      display: table-cell !important;
      max-height: none !important;
      overflow: auto !important; 
      font-size: 16px !important;
      line-height: 28px !important;
    }

    table.show-on-mobile{
      display: table !important;
      max-height: none !important;
      overflow: auto !important; 
      font-size: 16px !important;
      line-height: 28px !important;
    }
}

@media screen and (max-width: 320px) {
  .full-at-320 {
    width: 100%!important;
  }
}

</style>

<!-- Outlook doesn't support web fonts but when they are used, force outlook to display the next font in your stack instead of Times New Roman. -->
<!--[if gte mso 9]>
<style type="text/css">
table, td, div {font-family: Helvetica, Arial, Verdana, sans-serif !important;}
</style>
<![endif]-->

<!-- Makes all Versions of Outlook collpase borders to prevent unwanted space -->
<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
table {border-collapse: collapse;!important}
</style>
<![endif]-->

</head>
<body style="Margin:0; padding:0; min-width:100%; background-color:#ffffff">

<!-- BEGIN : Visually Hidden Preheader Text  -->
<div style="display:none;font-size:1px;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;mso-hide:all;font-family: sans-serif;">
Insert Preheader text here!
</div>


<!-- I'm using tables as modules instead of table rows to avoid background color isssues - This also alows full bleed bg images at every level-->

<!-- BEGIN : 640px Email Wrapper  -->
<table align="center" cellpadding="0" cellspacing="0" border="0" width="100%"> <!-- This table is for full bleed backgrounds -->
<tr>
<td align="center">
<table align="center" role="presentation" border="0" cellpadding="0" cellspacing="0" width="640" class="email-container">
<tr>
<td>
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="padding:10px 0 0 0;">


<!-- BEGIN : Body Copy 1 -->
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
  <tr>
    <td bgcolor="#ffffff" style="padding:60px 0 60px 0;" class="add-20px-padding-sides">
      <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
        <tr>
          <td align="center" style=" padding:0 0 25px 0; color:#333333; font-family: 'Roboto', Arial, Helvetica, sans-serif; font-weight:300; font-size:28px; line-height:36px;">
            HEADLINE ABOUT BETTER MOUSTRAP&nbsp;HERE
          </td>
        </tr>
        <tr>
          <td align="left" style="padding-bottom:10px; color:#333333; font-family: 'Roboto', Arial, Helvetica, sans-serif; font-weight:500; font-size:16px; line-height:24px;">
            Subhead here if needed
          </td>
        </tr>
        <tr>
          <td align="left" style="padding-bottom:35px; color:#888888; font-family: 'Roboto', Arial, Helvetica, sans-serif; font-weight:300; font-size:13px; line-height:20px;">
            Sed sollicitudin tristique ex eu feugiat. Maecenas sit amet magna eget sapien posuere sagittis at quis a magna. In vitae leo dui. Quisque et lectus erat. Viv.amus at porta as justo, id convallis ante. Class aptent citi sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc finibus id mi at citor. Curabitur volutpat risus aliquet tortor ultrices, eu aliquet mauris porta.
          </td>
        </tr>
        <tr>
          <td align="left" style=" color:#888888; font-family: 'Roboto', Arial, Helvetica, sans-serif; font-weight:300; font-size:13px; line-height:20px;">
            Sed sollicitudin tristique ex eu feugiat. Maecenas sit amet magna eget sapien posuere sagittis at quis a magna. In vitae leo dui. Quisque et lectus erat. Viv.amus at porta as justo, id convallis ante. Class aptent citi sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc finibus id mi at citor. Curabitur volutpat risus aliquet tortor ultrices, eu aliquet mauris porta.
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>
<!-- END : Body Copy 1  -->



<!-- BEGIN : 2-Column  -->
  <table bgcolor="" align="left" cellpadding="0" cellspacing="0" border="0" width="100%"> <!-- This table is for full bleed backgrounds -->
    <tr>
      <td align="center">
        <table align="center" role="presentation" border="0" cellpadding="0" cellspacing="0" width="640" class="email-container">
          <tr>
            <td>
              <table align="left" role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
                <tr>

                  <td valign="top" bgcolor="#ffffff" width="320" class="center-on-narrow full-at-320" style="font-size:0;">
                    <img src="http://www.josheanes.com/images/db-2col-img-v.png" alt="" border="0" width="320" style="display:block; width:100%; max-width:320px; height:auto;font-size:0;" />
                  </td>


                  <td valign="top" bgcolor="#6b489b" width="320" class="center-on-narrow email-container add-20px-padding-top-bottom">
                    <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
                      <tr>
                        <td align="left" style="padding:20px 20px 5px 20px;font-family: 'Roboto', Arial, Helvetica, sans-serif; font-weight:400; font-size:20px; line-height:30px; color:#ffffff;" class="add-40px-padding-sides">
                          HEADLINE ABOUT MEMBER 
                          ENGAGEMENT
                        </td>
                      </tr>
                      <tr>
                        <td align="left" style="padding:0 20px 10px 20px; font-family: 'Roboto', Arial, Helvetica, sans-serif; font-weight:300; font-size:13px; line-height:20px; color:#ffffff;" class="add-40px-padding-sides">
                          &ldquo;Participation in the survey has tripled,. We 
                          attribute this remarkable change to being able 
                          to maintain the interface that our members like 
                          while cutting data entry time significantly... 
                          Feedback to date has been overwhelmingly 
                          positive on all fronts. I’m confident that these 
                          changes have laid the groundwork for even 
                          greater participation in the future. We always 
                          have that option of making changes quickly 
                          and easily thanks to the ease of use of this 
                          great benchmarking&nbsp;tool.&rdquo; 
                        </td>
                      </tr>
                      <tr>
                        <td align="left" style="padding:0 20px 5px 20px;font-family: 'Roboto', Arial, Helvetica, sans-serif; font-weight:300; font-size:13px; line-height:20px; color:#ffffff;" class="add-40px-padding-sides">
                          Stephen Neel, <br />
                          Senior Technical Director <br /> 
                          Global Cold Chain Alliance
                        </td>
                      </tr>
                      <tr>
                        <td align="left" style="padding:10px 0 0 20px;" class="reset-padding add-10px-padding-top-bottom add-40px-padding-sides">
                          <table align="left" role="presentation" border="0" cellpadding="0" cellspacing="0" class="center-on-narrow">
                            <tr>
                              <td align="left" height="30" valign="middle" bgcolor="#96bf3f" style="padding-left: 15px; padding-right: 15px; font-family: 'Roboto', Arial, Helvetica, sans-serif; font-weight:700; font-size:14px;">
                                <a href="#" target="_blank" style="text-decoration: none; color: #ffffff; font-weight: 700!important;"><span style="color:#ffffff;text-decoration:none;">Read More<span></a>
                              </td> 
                            </tr>
                          </table>
                        </td>
                      </tr>
                    </table>
                  </td>

                </tr>
              </table>
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table> 
<!-- END : 2-Column  -->



<!-- BEGIN : Body Copy 2 -->
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
  <tr>
    <td bgcolor="#ffffff" style="padding:60px 0 60px 0;" class="add-20px-padding-sides">
      <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
        <tr>
          <td align="center" style=" padding:0 0 25px 0; color:#333333; font-family: 'Roboto', Arial, Helvetica, sans-serif; font-weight:300; font-size:28px; line-height:36px;">
            HEADLINE ABOUT REVENUE STREAM&nbsp;HERE
          </td>
        </tr>
        <tr>
          <td align="left" style="padding-bottom:10px; color:#333333; font-family: 'Roboto', Arial, Helvetica, sans-serif; font-weight:500; font-size:16px; line-height:24px;">
            Subhead here if needed
          </td>
        </tr>
        <tr>
          <td align="left" style=" color:#888888; font-family: 'Roboto', Arial, Helvetica, sans-serif; font-weight:300; font-size:13px; line-height:20px;">
            Sed sollicitudin tristique ex eu feugiat. Maecenas sit amet magna eget sapien posuere sagittis at quis a magna. In vitae leo dui. Quisque et lectus erat. Viv.amus at porta as justo, id convallis ante. Class aptent citi sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc finibus id mi at citor. Curabitur volutpat risus aliquet tortor ultrices, eu aliquet mauris porta.
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>
<!-- END : Body Copy 2  -->




<!-- BEGIN : Footer -->
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
  <tr>
    <td align="center" bgcolor="#a0a4a9" style="font-family: 'Roboto', Arial, Helvetica, sans-serif; font-size:13px; color:#ffffff; padding:30px 20px 30px 20px;" class="small-text">
      All rights reserved 
    </td>
  </tr>
</table>
<!-- END : Footer  -->



</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table> 
<!-- END : 640px Email Wrapper -->


</body>
</html>

Joshua Eanes replied 2017-04-26 15:01:36

Hi Kevin. Thank you very much. That's very generous of you :)

Joshua Eanes replied 2017-04-26 22:42:16

This turns out to be a problem with how Helvetica Neue is installed on your machine. The fix is here - https://www.quora.com/How-do-I-fix-the-Helvetica-Neue-Chrome-browser-problem-without-deleting-the-font

Reply to Joshua Eanes

The Litmus Community is the place for email designers and marketers to learn, grow, and educate each other about everything email.

Windows 10 Mail Bolds ALL Text. Even emails from Litmus!

Sign in to Community

Join the Litmus Community

Sign up to Community

Get more out of your Litmus account

Forgot password