Credit to jmwhite from campaignmonitor for getting the ball rolling on this.

DPI Scaling in Outlook 2007-2013

You might have had this problem before. The email you've painstakingly built finally works and even looks great in Outlook, but increasingly you are being sent screenshots from Outlook that don't look anything at all like what you sent. Fonts are blown out, tables appear crunched, eventually you track down the problem and realise that the user had enabled desktop DPI scaling because of poor eyesight, or increasingly, because this is the default setting on new high DPI laptops. What is an email developer to do?

This is what Outlook is doing to your email

Every time someone opens your email in Outlook, it is transformed into something unrecognisable by the word rendering engine. This is the root cause of the problem, and until now no one really knew why emails were being horribly disfigured by desktop scaling. Here's what happens:

  • All widths and heights defined using html attributes are preserved as pixel values.
  • All "px" widths and heights defined in VML shapes are preserved as pixel values.
  • All other "px" values are converted into "pt" values.
  • Desktop scaling is applied to relative units like "pt". For example, 10pt@150% desktop scaling would be equivalent in size to 15pt@100% desktop scaling.

This is why your fonts look blown out, or conversely, why your tables look like they are crunched. Your fonts, padding, margins, borders, etc. are all converted to "pt" values and scaled up, while your tables and images are essentially using unscaled "px" values defined by attribute.

The solution is SIMPLE...

Define all table cell pixel widths and heights using inline styles. They will then be converted to points by Outlook. This isn't necessary for percentage widths since it's already a relative unit.

<!-- Wrapper table is percent width, no inline style needed -->
<table width="100%" cellspacing="0" cellpadding="0" border="0">
  <tr>
    <td align="center">

    <table cellspacing="0" cellpadding="0" border="0" align="center">
      <tr>
        <td height="200" align="center" style="width: 600px; height: 200px;">
        <!-- Use inline styles for pixel widths and heights -->
        <!-- Still need height attribute for Gmail -->
        </td>
      </tr>
    </table>

    </td>
  </tr>
</table>

To make VML and images scale properly, add this markup to your header (don't forget the xml namespaces).

<html xmlns="http://www.w3.org/1999/xhtml"
 xmlns:v="urn:schemas-microsoft-com:vml"
 xmlns:o="urn:schemas-microsoft-com:office:office">

<head>
<!--[if gte mso 9]><xml>
 <o:OfficeDocumentSettings>
  <o:AllowPNG/>
  <o:PixelsPerInch>96</o:PixelsPerInch>
 </o:OfficeDocumentSettings>
</xml><![endif]-->
</head>

For cellspacing and cellpadding, add these mso styles.

<table cellspacing="5" cellpadding="10" border="0" style="mso-cellspacing: 5px; mso-padding-alt: 10px 10px 10px 10px">
...
</table>

There you have it. Scalable emails in Outlook with minimal effort.

These findings are preliminary and have yet to be field tested, so please post your feedback and I will update accordingly. Happy coding!

Edit: Vastly simplified thanks to some special xml that hopefully fixes VML and image scaling. Again, not field tested, but promising from what I've been able to see.

Edit: Solution confirmed to be working by jmwhite

Edit: Still need height attribute for Gmail, added some extra styles to make cellspacing and cellpadding scale properly.