Why does my email signature look fine in Gmail but break in Outlook?

Outlook Desktop on Windows renders HTML signatures with the Microsoft Word (MSO) engine, not a browser engine. MSO ignores CSS max-width, Flexbox, and Grid, so images and layouts that rely on those properties render at their native size or collapse entirely. The fix is to set explicit width and height HTML attributes on every image, not just CSS.

Why do table borders turn into bright white lines in dark mode?

Email clients automatically invert light-colored backgrounds and borders when the operating system is in dark mode. If your signature's table cells have an implicit or near-white border instead of an explicit border: none, the inversion algorithm turns that border into a glowing line. Setting border="0" and style="border: none;" on every table and cell prevents this.

Should I use a PNG image instead of HTML for my email signature?

No. Image-only signatures cannot be selected, copied, or read by screen readers, they support only one clickable link total, and corporate spam filters often flag image-heavy, text-light emails. An HTML table-based signature keeps every link independently clickable and passes spam filters more reliably.

Why Email HTML Is Still a Nightmare in 2026

We are building apps in 2026 with React 19, Turbopack, Tailwind CSS, and WebAssembly. Yet when you send an email with an HTML signature or newsletter, your markup travels thirty years back in time.

Every business day, over 4.5 billion people send emails. And almost every developer or founder who tries to design a clean, professional email signature runs into an infuriating wall.

In Outlook Desktop on Windows, your 80px circular headshot abruptly expands to a monstrous 2000px high-resolution banner.
In Gmail Dark Mode on iOS/Android, your invisible table dividers invert into harsh, glowing white gridlines.
In Apple Mail, your custom brand typography is completely stripped away and replaced with standard 12pt Helvetica.
In Google Docs/Sheets, copying a layout injects 15,000 characters of hidden XML bloat, causing Gmail to error out with "The signature is too long."

Our team scraped and analyzed 2,529 user comments across the top 25 YouTube tutorials on email signature creation, totaling over 18.6 million views. Over 64% of all comments were desperate pleas for bug fixes.

Here is what we learned reverse-engineering how each client lays out HTML, and which of those findings ended up hard-coded into our compiler.

Quirk 1: The Microsoft Word Rendering Engine (MSO) and the Exploding Avatar

Most developers assume Outlook renders HTML like Microsoft Edge or Chromium. It does not.

Classic Microsoft Outlook on Windows (Outlook 2016, 2019, 2021, and Office 365 desktop) still uses Microsoft Word (MSO) as its HTML layout engine. Word's rendering engine does not support modern CSS Flexbox, CSS Grid, CSS max-width/min-width/object-fit, or border-radius on images.

Because the image file might be a 2x Retina file (e.g., 600x600px), Word completely ignores style="max-width: 80px;" and renders the image at its native 600px resolution. Your headshot blows up the entire email.

htmlThe MSO fix: declare physical width/height attributes alongside inline styles.

<img src="https://example.com/avatar-2x.png"
     alt="Alex Morgan"
     width="80"
     height="80"
     style="width: 80px; height: 80px; max-width: 80px; border-radius: 50%; object-fit: cover; display: block; border: 0; outline: none; text-decoration: none;" />

Quirk 2: The Gmail & Apple Mail Dark Mode "Ghost Border"

One of the most requested tutorials on YouTube is "How to fix white borders in Dark Mode." When users design an email signature using Google Docs or Google Sheets tables, they set table borders to "0pt" or "Transparent / #FFFFFF."

When Gmail or Apple Mail detects a dark theme on the operating system, it applies an automatic color inversion algorithm to background and border properties. Google Docs does not actually delete table borders; it outputs a border style with #ffffff. In Dark Mode, the email client converts white into a dark gray, but converts transparent or light container borders into bright high-contrast white lines.

Every container table and nested cell must explicitly carry legacy reset attributes and inline CSS border declarations so dark mode color inversion engines have no border primitives to invert.

htmlThe zero-border table compiler solution.

<table cellpadding="0"
       cellspacing="0"
       border="0"
       style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border: none;">
  <tr>
    <td valign="top" style="border: none; padding: 0;">
      <!-- Content -->
    </td>
  </tr>
</table>

Quirk 3: The Apple Mail Typography Stripping Trap

If you create an HTML signature with custom styling and paste it into macOS Mail, you may find that every recipient receives default system Helvetica. This isn't an HTML issue — it's a hidden setting in macOS Mail.

Inside macOS Mail Settings > Signatures, there is a checkbox titled "Always match my default message font." If this checkbox is ticked, which is the default on many macOS versions, Apple Mail strips all inline font-family, font-size, and font-color declarations when composing messages.

The fix: untick this option, and Apple Mail preserves all inline CSS table typography.

Quirk 4: Why Canva PNG Signatures Are a Dead End

A common trend among non-technical creators is designing an email signature in Canva and exporting it as a single PNG image. While visually appealing, image-only signatures introduce three fatal flaws.

Zero text selectability: recipients cannot highlight, copy, or save your phone number, address, or email.
Single link limitation: an image can only have one destination URL, so you cannot have separate links for LinkedIn, X, GitHub, and a booking link.
Spam filters and security firewalls: corporate email gateways penalize image-heavy emails with low text-to-image ratios, routing them into the spam folder.

The Golden Rules

If you are building or styling for email clients today, these four rules hold across every client we tested:

Never trust CSS max-width on images; always specify physical HTML width and height attributes for Outlook MSO.
Never leave table borders implicit; enforce border="0" and style="border: none;" to survive dark mode inversion.
Avoid single-image exports; use semantic HTML tables with discrete mailto:, tel:, and social hyperlink tags.
Minify your markup to stay well beneath Gmail's 10KB signature size limit.

Why Email HTML Is Still a Nightmare: Reverse-Engineering Dark Mode and Outlook's Word Engine