Skip to main content
Here are some HTML-safe formatting techniques commonly used in emails:

​
Inline CSS

Use inline CSS styles rather than external or internal stylesheets. This ensures that your styling is more likely to be rendered consistently across various email clients. Additionally, you can leverage the brands designer to apply CSS styles to your email templates.
Some email clients like Gmail will only support <styles> in the <head> element.

​
Basic HTML tags

Stick to basic HTML tags like <p>, <div>, <span>, <a>, <strong>, <em>, <ul>, <ol>, <li>, <h1> to <h6>, etc. These are widely supported across email clients.

​
Tables

Tables are often used for layout in HTML emails because they are well-supported across different email clients. However, keep your table structures simple and avoid complex nesting. Email clients like gmail will impose certain limitations on HTML tables like:
  • Handling of nested tables can be inconsistent, leading to layout distortions or unexpected behavior in the email layout.
  • Lack of support conditional formatting for table cells, which limits dynamic content presentation within tables.

​
Inline Images

Embed images using the <img> tag and provide appropriate alt attributes for accessibility. Make sure to host your images on a reliable server.
Courier does not host images at this time for src paths. The exception is using Image Blocks for your templates which will host the image on our server.
Use the <a> tag for hyperlinks. Ensure that all links are clickable and provide descriptive anchor text.

​
Font Styles

Use CSS for basic font styles like color, size, family, and weight. Avoid using web fonts that may not be supported by all email clients.

​
Web Fonts

While desktop fonts are loaded onto an individual computer so they can be used in word processors and other applications, web fonts are stored online and downloaded by browsers. When someone accesses a page on a website, web fonts are specified through CSS ⸺ often using the @font-face declaration. Email clients that do support web fonts include:
  • Apple Mail
  • iOS Mail
  • Android Mail (not Gmail)
  • Thunderbird
  • Outlook for macOS

​
Web Safe Fonts

Fonts that are deemed web safe are more likely to be supported across email clients. However, it’s important to note that even though a font is classified as web safe, it doesn’t guarantee complete safety for use in email marketing.
  • Arial (sans-serif)
  • Verdana (sans-serif)
  • Helvetica (sans-serif)
  • Tahoma (sans-serif)
  • Trebuchet MS (sans-serif)
  • Times New Roman (serif)
  • Georgia (serif)
  • Garamond (serif)
  • Courier New (monospace)
  • Brush Script MT (cursive)

​
Email Safe Fonts

While the font choices may not be particularly thrilling, opting for these options guarantees a uniform experience across various email platforms. Additionally, you might discover an email-safe font that mirrors your brand’s preferred typeface.
  • Arial
  • Courier New
  • Georgia
  • Times New Roman
  • Trebuchet
  • Verdana

​
Background Colors

You can set background colors for elements using CSS. Keep in mind that some email clients may not fully support background colors.

​
Responsive Design

Consider using responsive design techniques to ensure that your email renders well on different devices and screen sizes. Media queries can be used to adjust the layout based on the viewport size.

​
Microsoft Outlook Compatibility

Microsoft Outlook 2019 and earlier versions use Microsoft Word’s rendering engine, which has strict requirements and behaves differently from modern email clients. To ensure your emails render correctly in Outlook, you’ll need to use MSO (Microsoft Office) conditional comments.
Outlook 2019 does not respect max-width on <div> elements. You must use table-based layouts with explicit width attributes for Outlook compatibility.

​
Using MSO Conditional Comments

MSO conditional comments allow you to provide Outlook-specific markup while keeping standard HTML for other email clients. This ensures consistent rendering across all platforms. The standard pattern wraps your table structure with MSO conditionals: 
<!--[if mso]>
<table width="600" style="width:600px;">
  <tr><td>
<![endif]-->
<table width="100%" style="max-width:600px;">
  <!-- Email content -->
</table>
<!--[if mso]></td></tr></table><![endif]-->

​
Formatting MJML for Outlook Compatibility

If you’re using MJML, be aware that it compiles to div-based structures which Outlook doesn’t handle well. For Outlook-critical sections, you may need to use <mj-raw> to inject raw HTML tables with MSO conditionals. For MJML brand footers that need MSO/Outlook compatibility, use <mj-raw> to inject Outlook-safe HTML like this: 
<mj-raw>
  <!--[if mso]>
  <table role="presentation" width="600" style="width:600px;">
    <tr><td>
  <![endif]-->
  <table role="presentation" width="100%" style="max-width:600px;">
    <tr>
      <td>
        Footer content
      </td>
    </tr>
  </table>
  <!--[if mso]></td></tr></table><![endif]-->
</mj-raw>

​
Key Outlook Best Practices

  • Use table-based layouts: Outlook 2019 doesn’t respect max-width on divs. Always use <table> elements with explicit width attributes.
  • Maintain consistent widths: If your email width is 600px, all sections (header, body, footer) should use 600px. Mixing different width values causes misalignment in Outlook.
  • Use role="presentation": Always include role="presentation" on layout tables to prevent screen readers from treating them as data tables.
  • Set background colors on tables: Outlook may ignore background colors on divs. Set background colors on both <table> and <td> elements.
Always verify the compiled HTML output to ensure Outlook compatibility, as MJML compilers may introduce unexpected CSS values or structures.

​
Testing

Always test your HTML emails across different email clients and devices to ensure consistent rendering. There are tools available that can help with email testing, such as Litmus or Email on Acid. By following these guidelines, you can create HTML emails that are compatible with a wide range of email clients while still allowing for attractive and engaging formatting. If you have any questions regarding email styles and formatting, you can always reach out to our support team.