---

Does Outlook sometimes make your email look like it was put through a garbage compactor and then fed through a taffy machine? Fonts are huge, tables look tiny and images are all out of whack? Worst of all, the email looks fine on your machine's Outlook! Why does it look different on your boss's laptop? The issue here is Outlook DPI scaling, a Windows setting that helps readers with visual impairments. DPI, or dots per inch, is a measure of how many dots (or pixels) can fit within a given space. The Outlook zoom problem is cropping up more and more as new high-DPI laptops often have the Outlook DPI scaling set as default.  This problem affects Outlook 2007-2013. Luckily, Michael Muscat for found a solution and posted about it on Campaign Monitor's forum.

How to Access DPI Settings in Windows

You can access the Outlook DPI scaling on a Windows machine by navigating to your display settings. Click on "Make text and other items larger or smaller." From here you can select 125% or 150% magnification. If you want to change resolution for Windows 10, you'll want to navigate to Settings > Display and chose from the drop-down menu under "Scale and layout."  You can check this computer setting to confirm that DPI scaling is the cause of Outlook zoom problems. Essentially, any amount of scaling over 100% will distort the email and the higher the percentage over 100%, the more distorted the email will look. But, as we'll note below, it's really all about how Outlook converts pixels and points.

Seeing the Zoomed-In Version of Your Email

Email on Acid's Campaign Precheck features a step where you can view your email zoomed in at 200%. This will give you a sense of what your font, images or design will look like if a user has high DPI settings. The zoom tool is part of Campaign Precheck's accessibility workflow, which helps you craft emails that are more accessible for users with disabilities or vision impairments. Here's an example of the zoom tool in action:   Email on Acid's Email Testing also features previews at 120 DPI for Outlook 2010, Outlook 2013 and Outlook 2016, so you can easily find rendering issues with versions of Outlook that may distort your email. [caption id="attachment_5858" align="alignright" width="693"] A few examples of Outlook previews in Email on Acid - notice the 120 DPI versions.[/caption]  

Why Does DPI Scaling Mangle My Email So Much?

This display setting causes some parts of the email to scale in size, while others remain the same. That's why your email looks distorted and warped.

• Widths and heights specified in HTML attributes remain pixel values.
• Widths and heights specified in VML code remain pixel values.
• Other pixel values (px) are converted to point (pt) values instead. This is why we see problems, like font display issues.

In other words, Outlook converts pixels to points inconsistently throughout your email, so parts of your code will render differently. Perhaps more annoying is the fact that different versions of Outlook will handle the conversion in different ways (Outlook 2007 will do it slightly different than Outlook 2010 or 2013). Desktop scaling affects relative units, like the “pt” values it converts most of your pixel values too. For example, if the user has set their scaling to 125%, a 10pt font would become 12.5pt.

How Can I Code Email to Accommodate for Users with Desktop Scaling?

You can help control Outlook image scaling and increased font size in Outlook by making sure your email scales properly. By making a few simple code modifications, you can ensure the email will look great on any DPI setting.

Use Inline Styles and px Units on Tables

You'll want to define the height using the attribute (for Gmail) then define the height and width inline using px. Tables that have a percentage-based width don't need any treatment, as they will scale without issue. Here's an example of a table formatted this way:

<table>
  <tr>
    <td height="500" style="width: 500px;height: 500px;">
    </td>
  </tr>
</table>

Use this Tag to Make VML Scale

This solution is easy. You'll need to add the following to your head section to make VML scale properly.

<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>

Use MSO Magic for cellspacing and cellpadding

Using these inline styles will allow you to create scalable cellspacing and cellpadding.

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

That's it! You now have an email that is scalable in Outlook.

Outlook Getting You Down?

DPI scaling is hardly the only problem email developers face when coding for Outlook. If you're looking for more tips and tricks for coding emails for Outlook, check out these resources:

• Our complete guide to Outlook
• How to Create Excellent Emails in Outlook.com
• How to Code Emails for Outlook 2016
• GIFs and Outlook: What Can We Do?
• How Do I Get Rid of the Lines in Outlook Emails?

You can also use Email on Acid's Email Testing to see what your email will look like on 11 different versions of Outlook,  including three versions at 120 DPI. Try our free, seven-day trial and you'll also get access to our Campaign Precheck tools, including the zoom feature.