4 posts tagged with "Outlook"

We tested emojis across 17 email clients, including Gmail, Outlook.com, Yahoo, iCloud Mail, native iPhone mail, and Android apps. This guide shows which emojis are safe to use in email subject lines and campaigns, and which ones may appear as empty boxes or broken character sequences.

For 2026, two more smileys are safe across every environment we compared: 😌 Relieved Face and ☹️ Frowning Face. The complete list below contains familiar emojis with proven support. The newest Unicode 17.0 and Unicode 18.0 additions are not safe for email yet.

If you have ever opened an HTML email in Outlook and watched it fall apart, you already know the problem. Since Outlook 2007, Microsoft switched from using Internet Explorer to render emails to using Microsoft Word instead. That decision has haunted email developers ever since.

Word was built to render documents — not web pages. As a result, a large chunk of standard HTML and CSS simply does not work in Outlook. To fill the gaps, Microsoft introduced a set of proprietary CSS properties that all begin with mso-, short for Microsoft Office. Alongside these, they kept support for a mechanism called conditional comments, which lets you serve Outlook-specific HTML that no other email client will ever see.

Understanding both tools is essential if you want your emails to look great across all Outlook versions.

Conditional comments​

Conditional comments are the foundation of Outlook-specific code. They are HTML comments with special syntax that only Outlook's Word-based renderer understands. Every other email client treats them as regular comments and ignores the content inside.

The basic structure looks like this:

<!--[if mso]>
  <p>Only Outlook sees this</p>
<![endif]-->

You can also target specific Outlook versions using comparison operators:

Outlook versions map to these numbers:

So if you only want to target Outlook 2007 and later (the Word-based versions), you would write:

<!--[if gte mso 12]>
  <style>
    /* Styles only for Outlook 2007 and newer */
  </style>
<![endif]-->

The most useful MSO properties​

Most of the mso- properties exist deep in Word's rendering internals and you will never need them. But a handful of them come up in almost every well-built email. Here are the ones worth knowing.

mso-hide: all​

Hides an element completely in Outlook. This is useful for elements you only want shown in modern clients — for example, dark mode overrides, animated content, or fallback text that Outlook would otherwise expose.

<div style="mso-hide: all;">
  This will not appear in Outlook.
</div>

Note: display: none does not reliably hide elements in Outlook. mso-hide: all is the correct approach.

mso-line-height-rule and mso-line-height-alt​

Outlook handles line-height differently from other email clients. Decimal values like line-height: 1.5 are often ignored or rounded in unexpected ways.

Use mso-line-height-rule: exactly to tell Outlook to use the exact pixel value you specify, and mso-line-height-alt to set an alternative line height only for Outlook:

<p style="line-height: 24px; mso-line-height-rule: exactly;">
  This paragraph has a reliable line height in Outlook.
</p>

If you want Outlook to use a completely different line height than other clients:

<p style="line-height: 1.6; mso-line-height-alt: 24px; mso-line-height-rule: exactly;">
  Other clients use 1.6, Outlook uses exactly 24px.
</p>

mso-padding-alt​

Outlook ignores padding on <a> tags, which makes creating proper clickable buttons a challenge. mso-padding-alt lets you set padding specifically for Outlook — typically used alongside VML buttons so the visual result matches what other clients render.

<a href="#" style="padding: 12px 30px; mso-padding-alt: 0 20px;">
  Click me
</a>

It also works on table cells when you need Outlook to respect specific inner spacing:

<td style="padding: 20px; mso-padding-alt: 10px 20px 10px 20px;">
  Content
</td>

mso-font-alt​

Outlook falls back to Times New Roman when it cannot render a font. mso-font-alt lets you specify a different fallback font specifically for Outlook, giving you more control than the standard font-family stack.

<p style="font-family: 'Brand Font', Arial, sans-serif; mso-font-alt: Arial;">
  This text uses Arial in Outlook instead of Times New Roman.
</p>

mso-border-alt​

Outlook sometimes renders unexpected borders on elements, especially table cells and images. Setting mso-border-alt: none removes them:

<img src="image.png" style="border: 0; mso-border-alt: none;" />

You can also use it to apply a specific border only in Outlook:

<td style="mso-border-alt: solid #cccccc 1px;">
  Cell with a border in Outlook
</td>

mso-table-lspace and mso-table-rspace​

Outlook adds phantom spacing on the left and right sides of tables. These two properties remove it and are considered standard practice in every HTML email:

<table style="mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
  ...
</table>

You will see these in virtually every email reset stylesheet.

mso-color-alt​

When Outlook overrides text colors — for example, auto-coloring links — mso-color-alt lets you force a specific color:

<a href="#" style="color: #245157; mso-color-alt: #245157;">
  Link with forced color in Outlook
</a>

Combining conditional comments with VML​

The most advanced Outlook-specific technique combines conditional comments with VML (Vector Markup Language), an old Microsoft format that Outlook's Word renderer still understands. This is how you create rounded buttons that actually work in Outlook — as seen in the perfect button guide.

The pattern wraps a VML shape in a conditional comment so Outlook renders it, while other clients render the standard <a> tag:

<!--[if mso]>
  <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml"
               xmlns:w="urn:schemas-microsoft-com:office:word"
               href="#"
               style="width:160px; height:45px; v-text-anchor:middle;"
               arcsize="50%"
               fillcolor="#245157"
               stroke="f">
    <w:anchorlock/>
    <center>
<![endif]-->

<a href="#" style="background-color:#245157; border-radius:100px; color:#ffffff; display:inline-block; font-family: Arial, sans-serif; font-size:16px; padding:10px 30px; text-decoration:none;">
  Click me
</a>

<!--[if mso]>
    </center>
  </v:roundrect>
<![endif]-->

Other clients see only the <a> tag. Outlook renders the VML shape.

A practical Outlook reset​

Combining the most important MSO properties into a reset block that goes in your email's <head> is good practice:

<!--[if mso]>
<style type="text/css">
  table, td, p, a {
    mso-line-height-rule: exactly;
    mso-table-lspace: 0pt;
    mso-table-rspace: 0pt;
  }
  img {
    mso-border-alt: none;
  }
</style>
<![endif]-->

This alone will prevent many of the most common Outlook rendering issues before you even start writing your layout.

Outlook's Word-based renderer is not going away anytime soon. Mastering conditional comments and mso- properties is what separates emails that break in Outlook from emails that don't.

Complete list of MSO properties​

This is the full reference of every mso- property documented by Litmus, organized by category. Most relate to Word's internal document model and will never appear in email code — but the list is useful when you encounter an unfamiliar property in someone else's template.

Hover over any property name to see the accepted value type.

Font & Typography​

Language-specific Fonts​

These properties set fallback fonts for specific scripts and writing systems. Each accepts a font name as its value.

Line Height & Spacing​

Padding & Margins​

Borders​

Tables​

Lists​

Colors & Highlighting​

Element Positioning​

Width & Height​

Visibility​

Style Management​

Page & Document​

Text & Characters​

Wrap & Distance​

Footnotes & Endnotes​

Source: Litmus — Outlook & Windows Mail Overview

Ready to start making Better emails? Book a demo here.

Discover the Brand Indicators for Message Identification - a game-changer for email authenticity. Learn how BIMI enhances trust and engagement in email marketing

1. What is BIMI?​

At its core, BIMI is an email authentication protocol that empowers brands to display their logos alongside their email messages in their recipients' inboxes. This simple yet effective concept provides an instant visual cue that the email is legitimate and originates from a trusted source. By implementing BIMI, brands can bolster their email deliverability, increase open rates, and cultivate a sense of authenticity that resonates with recipients.

2. Where is it supported?​

BIMI is gaining traction across the digital landscape. Major email providers like Gmail, Yahoo, and AOL are backing this protocol, ensuring that your brand's logo can be proudly displayed next to your email messages for a more engaging user experience. This widespread adoption signifies the growing importance of email authentication in establishing a brand's credibility.

3. What are the Benefits?​

The benefits of BIMI extend far beyond mere aesthetics. Here's how brands stand to gain from implementing BIMI:

• Enhanced Trust: Displaying your logo within the inbox provides an immediate visual trust indicator, reducing the likelihood of recipients mistaking your emails for phishing attempts.

• Increased Open Rates: A recognizable logo makes your emails stand out, encouraging recipients to open and engage with your content.

• Consistent Branding: BIMI ensures that your brand's visual identity remains consistent across all email clients, reinforcing brand recognition.

• Improved Deliverability: Email providers are more likely to route authenticated emails to the inbox, reducing the chances of your messages ending up in the spam folder.

4. How to set it up​

Getting started with BIMI might sound complex, but it's a worthwhile investment for any marketing professional. Here's a step-by-step guide to implementing BIMI:

Note: You will need to have access to your hosting service to set it up.

1. Test if your SPF, DKIM and DMARC is correctly setup. Use - Bimigroup and enter your website. Note: If you do not have a correct DMARC setup you can use this example that we use at Better email, and change out with your preferred email address.

   Copy

   v=DMARC1;p=quarantine;pct=25;rua=mailto:[email protected]:ruf=mailto:[email protected]
   

2. Prepare your logo. BIMI only accepts SVG format, and most mails clients will round the edges of the logo, so be sure to give it a little padding. After that, please convert your SVG via this website, for correct settings in the SVG code Easydmarc.com

1. Upload your image to your website or a public accessible server

2. Note: This step is not necessary and cost $1.499/pr year, but the benefit is to show up in Gmail Register your logo on https://order.digicert.com and after follow this guide

3. Prepare the TXT for your DNS

   default._bimi.[Your website] IN TXT "v=BIMI1; l=[URL for the SVG]"
   

   Here is the example for Better Email
   default._bimi.better.email IN TXT "v=BIMI1; l=https://assets.better.email/1/a8fbba63-2d6c-47e2-9289-994c00df3642.svg"
   

4. Check Bimigroup generator if all your settings are correct

5. The BIMI VMC HACK for Gmail​

If you do not want to pay for VMC, there is a sneaky hack to avoid it. If you register the email address on Google. Fx [email protected]. Then you can create a profile image for that specific email address.

Conclusion In the competitive landscape of email marketing, standing out and building trust are paramount. BIMI not only achieves this, but also adds a layer of visual authenticity that today's consumers demand. As the face of your company before it's even opened, BIMI holds the potential to transform your email campaigns, making them more engaging, effective, and ultimately, more rewarding for your brand and your audience.

For more in-depth insights about BIMI, I recommend checking out resources from BIMI Group, Postmark, and Litmus.

Remember, in the ever-evolving world of email marketing, adopting innovative solutions like BIMI could be the differentiating factor that sets your brand apart from your competitors and propels your campaigns toward success.

Common issues​

1. BIMI is not showing up A. Did you test your setup through Bimigroup? If yes, the problem can be, that you are sending from an address with a unique ID such as [email protected] Be sure to send from a generic ID, such as [email protected] or [email protected] B. Did you check if your SVG got approved? BIMI requires specific code inside your SVG, and you therefor need to run your SVG through. bimi-logo-converter C. Did you check that the email client you are receiving your email supports BIMI? Fx Gmail only supports VMC BIMI (the paid BIMI)

2. BIMI is not showing on darkmode Simply put a white background behind the SVG.

Here is the guide to make a full supported button, rounded or square

Transparent Round button​

This button is fully transparent, and you will not have to worry about which background color you will put on top of. To work properly in Outlook, the button needs to have a width.

<td align="center">
    <div>

    <!--[if mso]>
        <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="#" style="width:111px; height:45px; v-text-anchor:middle;" arcsize="73%" stroke="#245157" strokecolor="#245157"  strokeweight="2pt">
            <w:anchorlock/>
            <center>
        <![endif]-->

         <a class="button_outline" href="#" style="mso-border-color-alt: none; mso-border-alt: none; background-color:transparent; border:2px solid #245157; border-radius:100px; color:#245157; display:inline-block;font-size: 16px; font-family: Montserrat, Arial, sans-serif; font-weight:500;line-height:22px;text-align:center;text-decoration:none;-webkit-text-size-adjust:none; min-width:85px; padding: 8px 30px; mso-padding-alt: 0 20px;" target="_blank">I'm a button</a><!--[if mso]>

                 </center>
            </v:roundrect>
        <![endif]-->

    </div>
</td>

Within our platform, we calculate the width in Liquid, and therefore the will the width of the button always be the perfect size. The Liquid code looks like this:

{% assign buttonWidth = article.cta_text | size | times: 8 | plus: 55% | round %}

Full color Round button​

This button has a background color, and is less tricky to deal with. Not only is the whole button clickable in Outlook, it is also rounded and size-accurate

<td align="center">
  <div>

    <!--[if mso]>
        <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="#" style="width:111px; height:45px; v-text-anchor:middle; border: 1px solid #245157; mso-padding-alt: 12px 55px 12px 55px;" arcsize="73%" stroke="f" fillcolor="#245157" strokecolor="#245157">
        <w:anchorlock/>
        <center>
    <![endif]-->

    <a class="button" href="#" style=" background-color:#245157;border-radius:100px; color:#ffffff; display:inline-block;font-size: 16px; font-family: Montserrat, Arial, sans-serif; font-weight:500;line-height:22px;text-align:center;text-decoration:none;-webkit-text-size-adjust:none; min-width:85px; padding: 8px 30px; mso-padding-alt: 0 20px;; pointer-events: none;">I'm a button</a>

    <!--[if mso]>
        </center>
        </v:roundrect>
    <![endif]-->

  </div>
</td

Hover animation on the buttons​

.button{
  background-color:#245157;
  color:#ffffff;
  border: 2px solid #245157;
  -webkit-transition:.5s;
      -moz-transition:.5s;
      -ms-transition:.5s;
}
.button:hover{
  background-color:#54bdcb !important;
  color:#ffffff !important;
  -webkit-transition:.5s;
      -moz-transition:.5s;
      -ms-transition:.5s;
}

Square responsive button for Outlook​

Unfortunately, if you do not use Better.email, you cannot have a responsive AND round button. We use liquid to calculate the width of the button, and other systems are simply not able to do that. However, here is a square responsive button. That means you do not have to add a width.

<tr>
<!--[if mso]>
<td align="center">
  <table cellspacing="0" cellpadding="0" border="0" style="vertical-align:middle; background-color: #191919; mso-padding-alt: 12px 40px 12px 40px;">
    <tr>
      <![endif]-->

          <td align="center">
   <a href="#" class="button" style="mso-line-height-alt: 22px; border: 1px solid #191919; background-color: #191919; color:#ffffff; display:inline-block;mso-bidi-font-family: Helvetica, Arial, sans-serif; font-family: 'Special Font', Helvetica, Arial, sans-serif; font-size:14px;font-weight:400;line-height:44px;text-align:center;text-decoration:none;min-width:145px; -webkit-text-size-adjust:none; padding: 0 20px 0 20px; text-transform:uppercase;" target="_blank">I'M A BUTTON</a>
          </td>

        <!--[if mso]>
      </tr>
      </table>
    </td>
  <![endif]-->
</tr>

Ready to start making Better emails? Book a demo here.