title: Why are my font-sizes changed by Outlook 2007, 10, 13, 16, 19?
body: <p>I have tried so many fixes to enable Outlook 2007+ (07,10,13,16,19) to render my email as I have built it.</p>
  
  <p>I have tried resetting the document &amp; tables. I tried a lot of different containers such as spans, font, p &amp; td's to contain the text, all with the font-size and line-height specified. Put meta tags in, changed the html tag. Yet it is just ignored and all of the text on the email is displayed at font-size: 16px.</p>
  
  <p>Is there a definitive way to guarantee my fonts are displayed at the same size I have coded them to be within the Outlook 07+ versions?</p>
  
  <p>Here is my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; 
   &lt;html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"&gt;
    &lt;head&gt;
     &lt;meta http-equiv="Content-Type" content="text/html charset=UTF-8"&gt;
     &lt;meta name="viewport" content="width=device-width"&gt;
     &lt;meta content="telephone=no" name="format-detection"&gt;
     &lt;meta name="ProgId" content="Word.Document" /&gt;
     &lt;meta name="Generator" content="Microsoft Word 12" /&gt;
     &lt;meta name="Originator" content="Microsoft Word 12" /&gt;
     &lt;!--[if !mso]&gt;&lt;!--&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
     &lt;!--&lt;![endif]--&gt;
     &lt;title&gt;blah Terminal&lt;/title&gt;
     &lt;link href="" rel="icon" type="image/x-icon"&gt;
     &lt;!--[if mso]&gt;
      &lt;style&gt;
       .fallback-font {
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
       }
      &lt;/style&gt;
      &lt;![endif]--&gt;
      &lt;!--[if gte mso 9]&gt;
       &lt;style&gt;
        a:visited {
         color:#f58220;
        }
       &lt;/style&gt;
      &lt;![endif]--&gt;
      &lt;!--[if (gte mso 9)|(IE)]&gt;
       &lt;style type="text/css"&gt;
        table {
         border-collapse: collapse;
         border-spacing: 0; 
         mso-line-height-rule: exactly; 
         mso-margin-bottom-alt: 0; 
         mso-margin-top-alt: 0; 
         mso-table-lspace: 0pt;
         mso-table-rspace: 0pt;
        }
       &lt;/style&gt;
      &lt;![endif]--&gt;
      &lt;!--[if gt mso 15]&gt;
      &lt;style type="text/css" media="all"&gt;
       table, tr, td {
        border-collapse: collapse;
       }
      &lt;/style&gt;
     &lt;![endif]--&gt;
     &lt;!--[if gtemso 9]&gt;&lt;xml&gt;
      &lt;o:OfficeDocumentSettings&gt;
       &lt;o:AllowPNG/&gt;
       &lt;o:PixelsPerInch&gt;96&lt;/o:PixelsPerInch&gt;
      &lt;/o:OfficeDocumentSettings&gt;
     &lt;/xml&gt;&lt;![endif]--&gt;
     &lt;style type="text/css"&gt;
      /* Fonts */
      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      body,
      p,
      a,
      input,
      textarea,
      button,
      input[type=text],
      input[type=submit],
      table,
      td,
      div,
      span,
      * {
       font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
       font-weight: bold!important;
       line-height: inherit;
       -webkit-font-smoothing:antialiased;
       -webkit-text-size-adjust: 100%;
       -ms-text-size-adjust: 100%;
      }
      h1,
      h2,
      h3,
      h4,
      h5,
      h6 {
       font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
       font-weight: bold!important;
       margin:0;
      }
      body,
      p,
      a,
      input,
      textarea,
      button,
      input[type=text],
      input[type=submit],
      table,
      td,
      div,
      span {
       font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
       font-weight: bold!important;
      }
      /* END Fonts */
  
      body {
       margin: 0 auto !important;
       padding: 0 !important;
       height: 100% !important;
       width: 100% !important;
      }
      table,
      td {
       border-collapse: collapse;
       mso-table-lspace: 0pt !important;
       mso-table-rspace: 0pt !important;
      }
      img {
       display: block;
       white-space: pre-line;
       -ms-interpolation-mode:bicubic;
      }
      a {
       text-decoration: none;
      }
      .ExternalClass * {
       line-height: 115%;
      }
  
      @media only screen and (max-width: 640px) {
       table[class=full-width],
       img[class=full-width],
       table[class=full-width_footer],
       a[class=full-width],
       div[class=full-width] {
        width: 100% !important;
        height: auto !important;
       }
      }
  
      @media only screen and (max-width: 480px) {
       table[class=small-full-width],
       img[class=small-full-width],
       table[class=small-full-width_footer],
       a[class=small-full-width],
       div[class=small-full-width] {
        width: calc(100% - 40px)!important;
        height: auto !important;
       }
      }
  
      @media only screen and (max-width: 640px) {
       table[class=full-width-margin] {
        width: 100% !important;
        height: auto !important;
        margin: 0 0 20px !important;
       }
      }
  
      @media only screen and (max-width: 640px) {
       td[class=singleColumn] {
        width: 100% !important;
        float: left !important;
       }
      }
  
      @media only screen and (max-width: 640px) {
       table[class=hide],
       td[class=hide],
       tr[class=hide],
       span[class=hide] {
        display: none !important;
       }
      }
  
      @media only screen and (max-width: 640px) {
       td[class=textJustify],
       a[class=textJustify] {
        text-align: justify !important;
       }
      }
  
      @media only screen and (max-width: 640px) {
       td[class=textCenter],
       a[class=textCenter] {
        text-align: center !important;
       }
      }
  
      @media only screen and (max-width: 640px) {
       td[class=textRight],
       a[class=textRight] {
        text-align: right !important;
       }
      }
  
      @media only screen and (max-width: 640px) {
       div[class=show] {
        display: block !important;
       }
      }
  
      @media only screen and (max-width: 640px) {
       td[class=smallTxt],
       a[class=smallTxt],
       span[class=smallTxt] {
        font-size: 11px !important;
       }
      }
  
      @media only screen and (max-width: 640px) {
       td[class=mediumTxt],
       a[class=mediumTxt],
       span[class=mediumTxt] {
        font-size: 14px !important;
       }
      }
  
      @media only screen and (max-width: 640px) {
       td[class=largeTxt],
       a[class=largeTxt],
       span[class=largeTxt] {
        font-size: 18px !important;
       }
      }
  
      @media only screen and (max-width: 640px) {
       table[class=singleColumnMobileShow] {
        display: block !important;
        visibility: visible !important;
        overflow: auto !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
       }
      }
  
      @media only screen and (max-width: 640px) {
       tr[class=singleColumnMobileShow] {
        display: block !important;
        visibility: visible !important;
        overflow: auto !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
       }
      }
  
      @media only screen and (max-width: 640px) {
       td[class=singleColumnMobileShow] {
        display: block !important;
        visibility: visible !important;
        overflow: auto !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
       }
      }
  
      @media only screen and (max-width: 640px) {
       [class=mobile-show] {
        overflow: visible !important;
        height: auto !important;
        display: block !important;
        line-height: 100% !important;
       }
      }
  
      @media only screen and (min-width: 481px) {
       div[class=singleColumnMobileShow] {
        display: block !important;
        visibility: visible !important;
        overflow: auto !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
       }
      }
  
      a:visited {
       color: #f58220;
      }
     &lt;/style&gt;
     &lt;style sh-font-styles=""&gt;
      /* Generated by SharpSpring -- Do not edit */
      [class].font1 {font-family: 'Open Sans',Arial, sans-serif !important;}
      [class].font2 {font-family: 'Open Sans',Arial, sans-serif !important;}
     &lt;/style&gt;
    &lt;/head&gt;
  
    &lt;body bgcolor="#c6c6c6" class="body" style="margin:0;padding:0 !important;mso-line-height-rule:exactly;"&gt;
     &lt;!--[if mso]&gt;
     &lt;style type="text/css"&gt;
      body, table, td, a, span {
       font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
      }
     &lt;/style&gt;
     &lt;![endif]--&gt;
     &lt;table width="100%" bgcolor="#c6c6c6" border="0" cellspacing="0" cellpadding="0" style="width:100%;"&gt;
      &lt;tr&gt;
       &lt;td align="center" valign="top" width="100%"&gt;
        &lt;table width="640" border="0" cellspacing="0" cellpadding="0" class="full-width" style="width:640px;color:black;"&gt;
         &lt;tr&gt;
          &lt;td width="640" align="center" valign="top"&gt;
           &lt;table bgcolor="#68659f" width="640" border="0" cellspacing="0" cellpadding="0" class="full-width" style="width:640px;"&gt;
            &lt;tr&gt;
             &lt;td width="20" valign="top"&gt;&lt;img alt="" src="https://movemarketing.co.uk/wp-content/themes/dragon-force/emails/blah/19/10/25/img/blank.png" width="20" style="display:block;"&gt;
             &lt;/td&gt;
             &lt;td class="hide" width="50" valign="top"&gt;&lt;img alt="" src="https://movemarketing.co.uk/wp-content/themes/dragon-force/emails/blah/19/10/25/img/blank.png" width="50" style="display:block;"&gt;
             &lt;/td&gt;
             &lt;td width="500" align="center" valign="top"&gt;
              &lt;table width="500" border="0" cellspacing="0" cellpadding="0" class="full-width" style="width:500px;"&gt;
               &lt;tr&gt;
                &lt;td width="500" valign="top" height="20" style="line-height:20px;font-size:20px !important;"&gt;&amp;nbsp;&lt;/td&gt;
               &lt;/tr&gt;
               &lt;tr&gt;
                &lt;td width="500" align="center" valign="top" style="color:#0d233e;line-height:28px;font-size:24px !important;font-weight:bold;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif !important;"&gt;
                 &lt;span style="font-size:24px !important;line-height:28px;mso-line-height-alt:32px;"&gt;Are you still interested in how&lt;/span&gt;&lt;br/&gt;
                 &lt;span style="font-size:24px !important;line-height:28px;mso-line-height-alt:32px;color:#ffffff;"&gt;blah Terminal&lt;/span&gt; &lt;span style="font-size:24px !important;line-height:28px;"&gt;can help you outperform your Investment Management peers?&lt;/span&gt;
                &lt;/td&gt;
               &lt;/tr&gt;
               &lt;tr&gt;
                &lt;td width="500" valign="top" height="10" style="line-height:10px;font-size:10px !important;"&gt;&amp;nbsp;&lt;/td&gt;
               &lt;/tr&gt;
               &lt;tr&gt;
                &lt;td width="500" align="center" valign="top" style="color:#ffffff;font-size:12px !important;line-height:16px;mso-line-height-alt:20px;font-weight:bold;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif !important;"&gt;
                 &lt;span style="font-size:12px !important;line-height:16px;mso-line-height-alt:20px;"&gt;blah Terminal is the smarter platform for Investment Professionals. Innovative design and one-click navigation bring important events to your attention and helps you perform your role more efficiently.&lt;/span&gt;
                &lt;/td&gt;
               &lt;/tr&gt;
               &lt;tr&gt;
                &lt;td width="500" valign="top" height="20" style="line-height:20px;font-size:20px !important;"&gt;&amp;nbsp;&lt;/td&gt;
               &lt;/tr&gt;
               &lt;tr&gt;
                &lt;td width="500" align="center" valign="top"&gt;
                 &lt;div class="small-full-width"&gt;
                  &lt;!--[if mso]&gt;
                  &lt;v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://free-trial.blahterminal.com/?MC=1&amp;FirstName={$firstName}&amp;LastName={$lastName}&amp;Email={$emailAddress}" style="v-text-anchor:middle;width:320px;" arcsize="25%" stroke="f" fillcolor="#ffffff"&gt;
                   &lt;w:anchorlock/&gt;
                   &lt;center&gt;
                    &lt;![endif]--&gt;
                    &lt;a class="small-full-width" href="https://free-trial.blahterminal.com/?MC=1&amp;FirstName={$firstName}&amp;LastName={$lastName}&amp;Email={$emailAddress}" style="background-color:#ffffff;border-radius:10px;color:#24508c;display:inline-block;font-family:Helvetica,Arial,sans-serif !important;font-size:12px !important;font-weight:bold;text-align:center;text-decoration:none;width:320px;padding:10px 5px;-webkit-text-size-adjust:none;"&gt;GET YOUR FREE TRIAL OF blah TERMINAL&lt;/a&gt;
                    &lt;!--[if mso]&gt;
                   &lt;/center&gt;
                  &lt;/v:roundrect&gt;
                  &lt;![endif]--&gt;
                 &lt;/div&gt;
                &lt;/td&gt;
               &lt;/tr&gt;
               &lt;tr&gt;
                &lt;td width="500" valign="top" height="30" style="line-height:30px;font-size:30px !important;"&gt;&amp;nbsp;&lt;/td&gt;
               &lt;/tr&gt;
              &lt;/table&gt;
             &lt;/td&gt;
             &lt;td class="hide" width="50" valign="top"&gt;&lt;img alt="" src="https://movemarketing.co.uk/wp-content/themes/dragon-force/emails/blah/19/10/25/img/blank.png" width="50" style="display:block;"&gt;
             &lt;/td&gt;
             &lt;td width="20" valign="top"&gt;&lt;img alt="" src="https://movemarketing.co.uk/wp-content/themes/dragon-force/emails/blah/19/10/25/img/blank.png" width="20" style="display:block;"&gt;
             &lt;/td&gt;
            &lt;/tr&gt;
           &lt;/table&gt;
          &lt;/td&gt;
         &lt;/tr&gt;
        &lt;/table&gt;
       &lt;/td&gt;
      &lt;/tr&gt;
     &lt;/table&gt;
    &lt;/body&gt;
   &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>And here are the results:</p>
  
  <p><a href="https://i.stack.imgur.com/K5ibS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/K5ibS.png" alt="enter image description here"></a></p>
  
  <p>If you refer to this image you can see the big title is displayed at a much smaller size on the outlook 2007+ versions.</p>
  
  <p><strong>Edit:</strong> The <strong>solution</strong> turned out to be, make sure I am applying the styles in the head using a class as well as by targeting attributes (some engines must ignore targeting of elements). Along with removing all inline-style uses of !important.</p>
  
  <p>Here is an updated snippet for you to see:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; 
  &lt;html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"&gt;
   &lt;head&gt;
    &lt;meta http-equiv="Content-Type" content="text/html charset=UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width"&gt;
    &lt;meta content="telephone=no" name="format-detection"&gt;
    &lt;meta name="ProgId" content="Word.Document" /&gt;
    &lt;meta name="Generator" content="Microsoft Word 12" /&gt;
    &lt;meta name="Originator" content="Microsoft Word 12" /&gt;
    &lt;!--[if !mso]&gt;&lt;!--&gt;
     &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
    &lt;!--&lt;![endif]--&gt;
    &lt;title&gt;Example Terminal&lt;/title&gt;
    &lt;link href="" rel="icon" type="image/x-icon"&gt;
    &lt;!--[if mso]&gt;
     &lt;style&gt;
      .fallback-font {
       font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
      }
     &lt;/style&gt;
     &lt;![endif]--&gt;
     &lt;!--[if gte mso 9]&gt;
      &lt;style&gt;
       a:visited {
        color:#f58220;
       }
      &lt;/style&gt;
     &lt;![endif]--&gt;
     &lt;!--[if (gte mso 9)|(IE)]&gt;
      &lt;style type="text/css"&gt;
       table {
        border-collapse: collapse;
        border-spacing: 0; 
        mso-line-height-rule: exactly; 
        mso-margin-bottom-alt: 0; 
        mso-margin-top-alt: 0; 
        mso-table-lspace: 0pt;
        mso-table-rspace: 0pt;
       }
      &lt;/style&gt;
     &lt;![endif]--&gt;
     &lt;!--[if gt mso 15]&gt;
     &lt;style type="text/css" media="all"&gt;
      table, tr, td {
       border-collapse: collapse;
      }
     &lt;/style&gt;
    &lt;![endif]--&gt;
    &lt;!--[if gtemso 9]&gt;&lt;xml&gt;
     &lt;o:OfficeDocumentSettings&gt;
      &lt;o:AllowPNG/&gt;
      &lt;o:PixelsPerInch&gt;96&lt;/o:PixelsPerInch&gt;
     &lt;/o:OfficeDocumentSettings&gt;
    &lt;/xml&gt;&lt;![endif]--&gt;
    &lt;style type="text/css"&gt;
     /* Fonts */
     h1,
     h2,
     h3,
     h4,
     h5,
     h6,
     body,
     p,
     a,
     input,
     textarea,
     button,
     input[type=text],
     input[type=submit],
     table,
     td,
     div,
     span,
     *,
     .base {
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
      font-weight: bold!important;
      line-height: inherit;
      -webkit-font-smoothing:antialiased;
      -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
     }
     h1,
     h2,
     h3,
     h4,
     h5,
     h6 {
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
      font-weight: bold!important;
      margin:0;
     }
     body,
     p,
     a,
     input,
     textarea,
     button,
     input[type=text],
     input[type=submit],
     table,
     td,
     div,
     span {
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
      font-weight: bold!important;
     }
     /* END Fonts */
  
     body {
      margin: 0 auto !important;
      padding: 0 !important;
      height: 100% !important;
      width: 100% !important;
     }
     table,
     td {
      border-collapse: collapse;
      mso-table-lspace: 0pt !important;
      mso-table-rspace: 0pt !important;
     }
     img {
      display: block;
      white-space: pre-line;
      -ms-interpolation-mode:bicubic;
     }
     a {
      text-decoration: none;
     }
     .ExternalClass * {
      line-height: 115%;
     }
  
     @media only screen and (max-width: 640px) {
      table[class=full-width],
      img[class=full-width],
      table[class=full-width_footer],
      a[class=full-width],
      div[class=full-width] {
       width: 100% !important;
       height: auto !important;
      }
     }
  
     @media only screen and (max-width: 480px) {
      table[class=small-full-width],
      img[class=small-full-width],
      table[class=small-full-width_footer],
      a[class=small-full-width],
      div[class=small-full-width] {
       width: calc(100% - 40px)!important;
       height: auto !important;
      }
     }
  
     @media only screen and (max-width: 640px) {
      table[class=full-width-margin] {
       width: 100% !important;
       height: auto !important;
       margin: 0 0 20px !important;
      }
     }
  
     @media only screen and (max-width: 640px) {
      td[class=singleColumn] {
       width: 100% !important;
       float: left !important;
      }
     }
  
     @media only screen and (max-width: 640px) {
      table[class=hide],
      td[class=hide],
      tr[class=hide],
      span[class=hide] {
       display: none !important;
      }
     }
  
     @media only screen and (max-width: 640px) {
      td[class=textJustify],
      a[class=textJustify] {
       text-align: justify !important;
      }
     }
  
     @media only screen and (max-width: 640px) {
      td[class=textCenter],
      a[class=textCenter] {
       text-align: center !important;
      }
     }
  
     @media only screen and (max-width: 640px) {
      td[class=textRight],
      a[class=textRight] {
       text-align: right !important;
      }
     }
  
     @media only screen and (max-width: 640px) {
      div[class=show] {
       display: block !important;
      }
     }
  
     @media only screen and (max-width: 640px) {
      td[class=smallTxt],
      a[class=smallTxt],
      span[class=smallTxt] {
       font-size: 11px !important;
      }
     }
  
     @media only screen and (max-width: 640px) {
      td[class=mediumTxt],
      a[class=mediumTxt],
      span[class=mediumTxt] {
       font-size: 14px !important;
      }
     }
  
     @media only screen and (max-width: 640px) {
      td[class=largeTxt],
      a[class=largeTxt],
      span[class=largeTxt] {
       font-size: 18px !important;
      }
     }
  
     @media only screen and (max-width: 640px) {
      table[class=singleColumnMobileShow] {
       display: block !important;
       visibility: visible !important;
       overflow: auto !important;
       width: 100% !important;
       height: auto !important;
       max-height: none !important;
      }
     }
  
     @media only screen and (max-width: 640px) {
      tr[class=singleColumnMobileShow] {
       display: block !important;
       visibility: visible !important;
       overflow: auto !important;
       width: 100% !important;
       height: auto !important;
       max-height: none !important;
      }
     }
  
     @media only screen and (max-width: 640px) {
      td[class=singleColumnMobileShow] {
       display: block !important;
       visibility: visible !important;
       overflow: auto !important;
       width: 100% !important;
       height: auto !important;
       max-height: none !important;
      }
     }
  
     @media only screen and (max-width: 640px) {
      [class=mobile-show] {
       overflow: visible !important;
       height: auto !important;
       display: block !important;
       line-height: 100% !important;
      }
     }
  
     @media only screen and (min-width: 481px) {
      div[class=singleColumnMobileShow] {
       display: block !important;
       visibility: visible !important;
       overflow: auto !important;
       width: 100% !important;
       height: auto !important;
       max-height: none !important;
      }
     }
  
     a:visited {
      color: #f58220;
     }
    &lt;/style&gt;
    &lt;style sh-font-styles=""&gt;
     /* Generated by SharpSpring -- Do not edit */
     [class].font1 {font-family: 'Open Sans',Arial, sans-serif !important;}
     [class].font2 {font-family: 'Open Sans',Arial, sans-serif !important;}
    &lt;/style&gt;
   &lt;/head&gt;
  
   &lt;body bgcolor="#c6c6c6" class="body" style="margin:0;padding:0;mso-line-height-rule:exactly;"&gt;
    &lt;!--[if mso]&gt;
    &lt;style type="text/css"&gt;
     body, table, td, a, span {
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
     }
    &lt;/style&gt;
    &lt;![endif]--&gt;
    &lt;table width="100%" bgcolor="#c6c6c6" border="0" cellspacing="0" cellpadding="0" style="width:100%;"&gt;
     &lt;tr&gt;
      &lt;td align="center" valign="top" width="100%"&gt;
       &lt;table width="640" border="0" cellspacing="0" cellpadding="0" class="full-width" style="width:640px;color:black;"&gt;
        &lt;tr&gt;
         &lt;td width="640" align="center" valign="top"&gt;
          &lt;table bgcolor="#68659f" width="640" border="0" cellspacing="0" cellpadding="0" class="full-width" style="width:640px;"&gt;
           &lt;tr&gt;
            &lt;td width="20" valign="top"&gt;&lt;img alt="" src="https://movemarketing.co.uk/wp-content/themes/dragon-force/emails/Example/19/10/25/img/blank.png" width="20" style="display:block;"&gt;
            &lt;/td&gt;
            &lt;td class="hide" width="50" valign="top"&gt;&lt;img alt="" src="https://movemarketing.co.uk/wp-content/themes/dragon-force/emails/Example/19/10/25/img/blank.png" width="50" style="display:block;"&gt;
            &lt;/td&gt;
            &lt;td width="500" align="center" valign="top"&gt;
             &lt;table width="500" border="0" cellspacing="0" cellpadding="0" class="full-width" style="width:500px;"&gt;
              &lt;tr&gt;
               &lt;td width="500" valign="top" height="20" style="line-height:20px;font-size:20px;"&gt;&amp;nbsp;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
               &lt;td class="base" width="500" align="center" valign="top" style="color:#0d233e;line-height:28px;font-size:24px;font-weight:bold;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;"&gt;
                &lt;span class="base" style="font-size:24px;line-height:28px;mso-line-height-alt:32px;"&gt;Are you still interested in how&lt;/span&gt;&lt;br/&gt;
                &lt;span class="base" style="font-size:24px;line-height:28px;mso-line-height-alt:32px;color:#ffffff;"&gt;Example Terminal&lt;/span&gt; &lt;span class="base" style="font-size:24px;line-height:28px;"&gt;can help you outperform your Investment Management peers?&lt;/span&gt;
               &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
               &lt;td width="500" valign="top" height="10" style="line-height:10px;font-size:10px;"&gt;&amp;nbsp;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
               &lt;td class="base" width="500" align="center" valign="top" style="color:#ffffff;font-size:12px;line-height:16px;mso-line-height-alt:20px;font-weight:bold;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;"&gt;
                &lt;span class="base" style="font-size:12px;line-height:16px;mso-line-height-alt:20px;"&gt;Example Terminal is the smarter platform for Investment Professionals. Innovative design and one-click navigation bring important events to your attention and helps you perform your role more efficiently.&lt;/span&gt;
               &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
               &lt;td width="500" valign="top" height="20" style="line-height:20px;font-size:20px;"&gt;&amp;nbsp;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
               &lt;td width="500" align="center" valign="top"&gt;
                &lt;div class="small-full-width"&gt;
                 &lt;!--[if mso]&gt;
                 &lt;v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://free-trial.Exampleterminal.com/?MC=1&amp;FirstName={$firstName}&amp;LastName={$lastName}&amp;Email={$emailAddress}" style="v-text-anchor:middle;width:320px;" arcsize="25%" stroke="f" fillcolor="#ffffff"&gt;
                  &lt;w:anchorlock/&gt;
                  &lt;center&gt;
                   &lt;![endif]--&gt;
                   &lt;a class="small-full-width base" href="https://free-trial.Exampleterminal.com/?MC=1&amp;FirstName={$firstName}&amp;LastName={$lastName}&amp;Email={$emailAddress}" style="background-color:#ffffff;border-radius:10px;color:#24508c;display:inline-block;font-family:Helvetica,Arial,sans-serif;font-size:12px;font-weight:bold;text-align:center;text-decoration:none;width:320px;padding:10px 5px;-webkit-text-size-adjust:none;"&gt;GET YOUR FREE TRIAL OF Example TERMINAL&lt;/a&gt;
                   &lt;!--[if mso]&gt;
                  &lt;/center&gt;
                 &lt;/v:roundrect&gt;
                 &lt;![endif]--&gt;
                &lt;/div&gt;
               &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
               &lt;td width="500" valign="top" height="30" style="line-height:30px;font-size:30px;"&gt;&amp;nbsp;&lt;/td&gt;
              &lt;/tr&gt;
             &lt;/table&gt;
            &lt;/td&gt;
            &lt;td class="hide" width="50" valign="top"&gt;&lt;img alt="" src="https://movemarketing.co.uk/wp-content/themes/dragon-force/emails/Example/19/10/25/img/blank.png" width="50" style="display:block;"&gt;
            &lt;/td&gt;
            &lt;td width="20" valign="top"&gt;&lt;img alt="" src="https://movemarketing.co.uk/wp-content/themes/dragon-force/emails/Example/19/10/25/img/blank.png" width="20" style="display:block;"&gt;
            &lt;/td&gt;
           &lt;/tr&gt;
          &lt;/table&gt;
         &lt;/td&gt;
        &lt;/tr&gt;
       &lt;/table&gt;
      &lt;/td&gt;
     &lt;/tr&gt;
    &lt;/table&gt;
   &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Working code in action:</p>
  
  <p><a href="https://i.stack.imgur.com/stlKK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/stlKK.png" alt="enter image description here"></a></p>
  
  <p>Massive thank you to contributors, saved me so much hassle! &lt;3</p>