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

You spent 30 minutes designing the perfect email signature. It looked great in your browser. Then you pasted it into Outlook and... disaster. The layout shifted, images disappeared, spacing went haywire, and your logo is now showing as an attachment.

Sound familiar? You're not alone. This is the single most common email signature problem, and it affects millions of Outlook users worldwide.

Here's exactly why it happens and how to fix it.

Why Outlook Breaks Your Signature

The root cause is simple but surprising: Microsoft Outlook doesn't use a web browser to render emails. Instead, it uses Microsoft Word's rendering engine.

This means:

• Modern CSS is ignored — flexbox, grid, max-width, float — none of it works
• Margin and padding behave differently — Word interprets spacing its own way
• Background images don't render — Word simply doesn't support them
• Web fonts are ignored — Outlook falls back to system fonts like Arial or Times New Roman
• Image sizing is unpredictable — especially if dimensions aren't explicitly set

This isn't a bug — Microsoft made this architectural decision years ago, and they've never changed it.

The 7 Most Common Outlook Signature Problems

1. Images Show as Attachments

Why: When you paste an image from your clipboard, Outlook embeds it as an attachment rather than displaying it inline.

Fix: Host your images on a web server or CDN, then reference them with a URL. Never paste images directly from your desktop.

2. Layout Completely Breaks

Why: Your signature uses <div> elements or CSS for layout. Outlook/Word ignores most CSS positioning.

Fix: Use <table> elements for all layout. Tables are the only reliable way to position elements side-by-side in Outlook.

3. Fonts Change or Look Different

Why: Outlook ignores web fonts (Google Fonts, etc.) and falls back to system fonts.

Fix: Use web-safe fonts: Arial, Verdana, Georgia, Tahoma, or Trebuchet MS. These are guaranteed to render correctly.

4. Spacing Is Wrong

Why: Word adds extra spacing around <p> tags and block elements. Your carefully designed padding gets overridden.

Fix: Use cellpadding and cellspacing on tables instead of CSS padding. Use <br> tags for line breaks instead of relying on paragraph margins.

5. Colours Don't Appear

Why: CSS colour properties on <div> or <span> elements can be stripped. Background colours on non-table elements are often ignored.

Fix: Apply bgcolor attributes directly to <td> elements. Use inline style attributes, not CSS classes.

6. Social Media Icons Are Missing

Why: The icons were hosted on a domain that Outlook blocks by default, or they were base64-encoded (Outlook strips these).

Fix: Host icons on a reliable CDN (Cloudinary, your company domain, or a public CDN like Flaticon). Use small PNG files, not SVGs (Outlook doesn't support SVG in emails).

7. The Signature Looks Different on Every Computer

Why: Different versions of Outlook use different rendering engines. Outlook 2007-2019 use Word, Outlook for Mac uses WebKit, and Outlook on the web uses a web browser.

Fix: Design for the lowest common denominator — HTML tables with inline styles. If it works in Outlook desktop (Word engine), it'll work everywhere else too.

The Golden Rules for Outlook-Proof Signatures

Follow these rules and your signature will survive any version of Outlook:

Rule 1: Tables for Everything

<table cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td>Logo here</td>
    <td>Details here</td>
  </tr>
</table>

This is the only layout method that works reliably across all Outlook versions.

Rule 2: Inline Styles Only

<!-- Good -->
<td style="font-family: Arial, sans-serif; font-size: 14px; color: #333333;">

<!-- Bad -->
<td class="signature-text">

Outlook strips <style> blocks and ignores CSS classes. Every style must be inline.

Rule 3: Explicit Image Dimensions

<!-- Good -->
<img src="https://cdn.example.com/logo.png" width="150" height="50" />

<!-- Bad -->
<img src="logo.png" style="max-width: 150px;" />

Always set width and height attributes on images. Don't rely on CSS for image sizing.

Rule 4: No CSS Shorthand

<!-- Good -->
style="padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px;"

<!-- Bad -->
style="padding: 10px;"

Outlook's Word engine sometimes misinterprets CSS shorthand. Be explicit.

Rule 5: Host Images Externally

Never embed or base64-encode images. Always use absolute URLs to externally hosted images:

<img src="https://res.cloudinary.com/yourcompany/logo.png" width="120" height="40" />

The Easiest Fix: Use a Generator

You shouldn't have to learn HTML table hacks to get a working email signature. That's what signature generators are for.

SendSignatures generates signatures that are specifically built for Outlook:

• Every template uses HTML tables — not CSS layouts
• Images are hosted on a CDN — no attachments, no broken links
• All styles are inline — nothing gets stripped
• Templates are tested across Outlook 2016, 2019, 2021, Office 365, and OWA

It takes 2 minutes, and you'll never have to debug a broken signature again.

Testing Your Signature

Before deploying your signature to everyone on your team:

1. Send a test to yourself — check on desktop Outlook, mobile, and webmail
2. Send to a colleague — ask them to screenshot what they see
3. Test on Gmail — paste your signature in Gmail settings too and verify
4. Check on mobile — open the test email on your phone

Summary

Problem	Cause	Fix
Broken layout	CSS positioning	Use HTML tables
Images as attachments	Pasted from clipboard	Host on CDN
Wrong fonts	Web fonts not supported	Use system fonts
Spacing issues	Word rendering engine	Use table cellpadding
Missing icons	Blocked or SVG format	Use PNG on CDN

---

Stop fighting with Outlook. Create an Outlook-proof signature in 2 minutes — free to start.