Why Your Email Signature Looks Broken in Outlook (and How to Fix It)

You built a clean HTML email signature. It looks great in Gmail. Then someone on Outlook complains it looks broken. Here is why — and exactly how to fix it.

Why Outlook renders HTML differently

Outlook desktop (Windows) uses the Microsoft Word HTML rendering engine — not a browser engine. This means it ignores most modern CSS, treats margins differently, and handles images inconsistently. Outlook on Mac, Gmail, and Apple Mail use WebKit-based renderers and behave as expected. Outlook Web App (OWA) is closer to Gmail but still has quirks.

The fixes below target Outlook desktop on Windows — the most problematic version and the most common in corporate environments.

Bug 1: Layout breaks because you used CSS flexbox or grid

Outlook ignores display: flex, display: grid, and most modern layout properties.

Fix: Use HTML tables for layout. This is not 2004 nostalgia — it is the only reliable cross-client approach for email.

<!-- Don't: -->
<div style="display: flex; gap: 12px;">...</div>

<!-- Do: -->
<table cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td style="padding-right: 12px;">Column 1</td>
    <td>Column 2</td>
  </tr>
</table>

Bug 2: Logo image not showing

Two causes: the image is blocked by Outlook's default image blocking, or you used a CSS background image (Outlook ignores background-image).

<!-- Don't: -->
<div style="background-image: url(logo.png); width: 120px; height: 40px;"></div>

<!-- Do: -->
<img src="https://yoursite.com/logo.png" alt="Company Logo"
     width="120" height="40" style="display: block;" />

The src must be an absolute URL (not a relative path). Outlook fetches images from the network — relative paths fail. Host your logo on a CDN or your public website.

Bug 3: Fonts not rendering correctly

Outlook ignores @font-face web fonts entirely. It falls back to system fonts. If you set font-family: 'Inter', sans-serif, Outlook will render in the default system font (usually Calibri or Times New Roman) which can break your layout sizing.

<!-- Safe font stack for signatures: -->
style="font-family: -apple-system, Arial, Helvetica, sans-serif; font-size: 14px;"

Bug 4: Spacing is wrong (margins ignored)

Outlook partially supports CSS margins but ignores them on some elements. Use padding on table cells instead of margin on divs.

<!-- Don't: -->
<p style="margin-top: 8px;">Name</p>

<!-- Do: -->
<table><tr><td style="padding-top: 8px;">Name</td></tr></table>

Bug 5: Links are blue and underlined even though you styled them

Outlook overrides link colors unless you use inline styles directly on the <a> tag. Class-based styles and inherited styles are ignored.

<a href="https://yoursite.com"
   style="color: #0B2545; text-decoration: none; font-weight: 600;">
  yoursite.com
</a>

The safe email signature template

<table cellpadding="0" cellspacing="0" border="0"
       style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #374151;">
  <tr>
    <td style="padding-right: 16px; border-right: 2px solid #E5E7EB; vertical-align: top;">
      <img src="https://yoursite.com/logo.png" alt="Logo" width="80" height="80"
           style="display: block; border-radius: 50%;" />
    </td>
    <td style="padding-left: 16px; vertical-align: top;">
      <p style="margin: 0; font-weight: 700; font-size: 16px; color: #111827;">Alex Johnson</p>
      <p style="margin: 4px 0 0 0; color: #6B7280;">Senior Product Designer · Acme Corp</p>
      <p style="margin: 8px 0 0 0;">
        <a href="mailto:alex@acme.com" style="color: #0B2545; text-decoration: none;">alex@acme.com</a>
        &nbsp;·&nbsp;
        <a href="https://acme.com" style="color: #0B2545; text-decoration: none;">acme.com</a>
      </p>
    </td>
  </tr>
</table>

The Email Signature Creator generates table-based signatures that use inline styles throughout — compatible with Outlook, Gmail, and Apple Mail out of the box. Three templates, one-click copy.