Creating the perfect email for corporate or marketing campaigns is a detailed and thoughtful process. Every aspect, from layout to fonts and colors, is carefully considered to ensure the message is both effective and visually appealing.

However, due to limitations in certain email clients, particularly Outlook, display issues can sometimes occur.

Since Outlook 2007, Microsoft Word has been used to render HTML emails, which often leads to unexpected layout problems. As Word is built for print rather than screen display, some design elements may not appear as intended.

In this article, we’ll explore the most common display issues in desktop versions of Outlook and how you can address them to ensure your emails render correctly across platforms.

Non-support for custom web fonts (ex. Google Fonts)

Outlook does not always support Google Fonts or other custom fonts, which can result in them being replaced by standard fonts such as Arial or Times New Roman. This may affect the overall appearance of the email if a more unique font was chosen.

To help maintain a consistent look, it is recommended to define a fallback font using the font family property. For example:

font-family: 'CustomFont', Arial, sans serif;

This ensures that if the custom font is not available, the email will still use a similar, widely supported font.

It is also important to be aware that font sizes might not display as intended. Outlook can interpret custom font sizes incorrectly, especially when using fonts that are not web safe. This can impact the layout or styling of the email.

In our editor:

In the Outlook email client:

Background Images:

Outlook has limited support for background images, which can result in them being missing or displayed incorrectly in emails.

1. Lack of CSS background-image support – Most versions of Outlook ignore backgrounds set using standard CSS.
2. Incorrect scaling or repetition – Even if the background appears, it may repeat or be cropped incorrectly.
3. Transparency issues – Outlook may not properly handle transparent background images.

Microsoft recently introduced CSS background image support in Outlook 365 and Outlook.com. However, unfortunately, most desktop versions of Outlook still do not support them.

Animated GIFs

Outlook has known limitations when it comes to animated GIFs. In older versions, from 2007 to 2016, only the first frame is shown because these versions use Microsoft Word to render emails, which does not support animation.

While newer versions of Outlook do support animated GIFs, playback may still vary depending on the version, user settings, or email client. Animations can be stopped or displayed incorrectly, and large file sizes may lead to longer loading times or be blocked due to security settings. Even in mobile versions of Outlook, animations may not always work as expected.

Tips:

• Place important information in the first frame of the GIF: If your GIF contains important information or a call to action, place it in the first frame, as it will be visible even in Outlook versions that don't support animation.
• Settings for Outlook 365: Enable the display of animated GIFs in the Outlook 365 settings for proper animation rendering.

No support for rounded corners

In Outlook, support for the CSS property border-radius, is limited or absent. This is because Outlook uses Microsoft Word to render HTML emails, which does not support this property.

For proper image display in Outlook email clients, it is recommended to use pre-prepared images with rounded corners. This will ensure correct display regardless of the Outlook version.

Additional information about the support of the border-radius property in various email clients can be found on the Can I Email resource (https://www.caniemail.com/features/css-border-radius/).

How it looks in our editor:

How it appears in the Outlook email client:

Outlook Adds White Lines to Emails

A common issue you may encounter is the appearance of random white lines in Outlook emails. This mainly occurs due to rendering quirks in older Outlook versions, which use Microsoft Word to display HTML and don’t fully support modern CSS.

The most accepted explanation is that these lines result from how Outlook converts pixel values (px) to points (pt) for properties like line-height, height, and font-size. When the conversion results in fractional values, it can create thin white gaps due to rounding issues.

The lines tend to stand out more when there’s a contrast between the background and text color.

To reduce the risk of this happening, try using even numbers for line heights, font sizes, and margins. While this doesn't always solve the issue completely, using the same background and text color or carefully adjusting spacing can help minimize its visibility.

No Support for SVG or WebP Images

Outlook does not support SVG or WEBP files for displaying images in emails. 

Level of support for SVG and WEBP can be found here. 

Dark Mode Issue in Outlook

Outlook automatically changes the colors of text, background, and images, which can lead to poor readability or loss of design elements.

Main Issues with Dark Mode in Outlook:

• Automatic Color Inversion – Outlook may change the text color from black to white and vice versa, even if they are manually set.
• Background Color Change – If a white background is used in light mode, it may automatically change to dark gray or black in dark mode.
• Image Issues – If there are images with transparent backgrounds or white elements in the email, they may blend into the dark background, making them invisible.
  Incorrect Display of Buttons and Logos – Buttons may lose their design, and logos with white text on a transparent background may become invisible.

    You can read more about Dark Mode in this article: