HTML Email Signature — Code That Works in Every Client

If you've ever tried to write HTML for an email signature, you know the pain. Modern CSS doesn't work. Divs break. Outlook ignores half your code. Here's what's actually happening, and what you should do instead.

Updated March 2026·~2,800 words·Includes working code example

Email HTML is its own strange discipline. You can write perfectly valid, standards-compliant HTML that looks great in a browser preview — and then watch it fall apart the moment you paste it into Outlook. Layouts collapse, fonts change, images appear as attachments.

The reason isn't a bug you can fix. It's a fundamental architectural decision that was made in 2007 and never reversed. This guide explains what's going on, gives you the rules for writing HTML that actually works, and includes a real working template you can use or adapt.

Why email HTML is stuck in 2003

Starting with Outlook 2007, Microsoft changed the Outlook rendering engine from Internet Explorer to Microsoft Word. That sounds like an internal implementation detail, but the consequences are enormous.

Word is a word processor. Its HTML renderer was designed to handle simple formatted documents — headings, paragraphs, bold text, basic tables. It was never designed to handle CSS layout properties, web fonts, or modern HTML5 elements. So when Outlook encounters CSS grid, flexbox, display: flex, position: relative, or half a dozen other modern properties, it either ignores them entirely or renders them incorrectly.

The rendering engine problem

Gmail

Engine: Chrome (Blink)

Good modern CSS support, but strips <style> blocks

Outlook 2007–2021

Engine: Microsoft Word

Very limited CSS. No flexbox, grid, or float.

Apple Mail

Engine: WebKit

Best CSS support. Web fonts work. Closest to a browser.

Gmail adds its own complication: it strips <style> blocks from the email <head> entirely. Any CSS you write in a stylesheet won't survive Gmail. The only CSS that works is inline styles — style="" attributes directly on HTML elements.

The result: if you want an email signature that works in Gmail, Outlook, and Apple Mail simultaneously, you're writing HTML roughly the way people wrote it in 2003. Tables for layout. Inline styles only. No JavaScript. No modern CSS. It's not elegant, but it's what the constraints require.

The rules of email-safe HTML

These aren't stylistic preferences — they're hard requirements if you want consistent rendering.

Use tables for layout, not divs

Div-based layouts rely on CSS for positioning. Since Outlook's Word renderer doesn't support the CSS needed for div layouts (flexbox, float, inline-block), divs collapse into a single column or stack unpredictably. HTML tables render correctly in every email client because table layout is determined by HTML attributes, not CSS.

✓ Do this

<table cellpadding="0" cellspacing="0"><tr><td>...</td></tr></table>

✗ Not this

<div style="display: flex">...

Inline all CSS

Don't use a <style> block, external stylesheet, or CSS classes. Gmail strips <style> blocks; Outlook ignores external stylesheets. Every style property needs to be written directly on the element as a style attribute.

✓ Do this

<p style="font-size: 14px; color: #1a1a1a;">

✗ Not this

<p class="body-text"> (with CSS elsewhere)

Use web-safe fonts with fallbacks

Web fonts (Google Fonts, custom @font-face) don't work in Outlook. Always include a web-safe fallback in your font stack: Arial, Helvetica, Georgia, or Times New Roman. These are installed on virtually every operating system.

✓ Do this

font-family: 'Inter', Arial, sans-serif;

✗ Not this

font-family: 'Inter'; (no fallback)

Host images externally, not as base64

Base64-embedded images are treated as attachments by Outlook, adding a paperclip icon to every email you send. Host images at a stable public URL instead. Set explicit width and height attributes on every img tag (not just via CSS) to prevent layout shifts in Outlook.

Set explicit width and height on images

Outlook's Word renderer sometimes ignores CSS width/height on images. Set the HTML attributes directly: <img width='80' height='80' ... >. Also include the CSS equivalent in the style attribute as a backup for other clients.

✓ Do this

<img width="80" height="80" style="width:80px;height:80px;" ...>

✗ Not this

<img style="width:80px;height:80px;" ...> (no HTML attrs)

No float, no position, no flexbox or grid

These CSS layout properties either don't work in Outlook or produce unpredictable results. float is particularly dangerous — it can cause entire sections to overlap or disappear. Use table columns for any multi-column layout instead.

Keep total width at 600px or less

600px is the safe maximum width for email content. Wider than that and you risk horizontal scrolling on smaller screens. Specify this on your outer table element.

✓ Do this

<table style="max-width: 600px;" ...>

✗ Not this

<table style="width: 900px;" ...>

A working HTML email signature template

Below is a simplified but fully functional HTML signature. It uses a two-column table layout (photo | text), inline CSS only, externally hosted images, and explicit image dimensions. It renders correctly in Outlook 2016/2021/365, Gmail, and Apple Mail.

Replace the placeholder values (URLs, names, contact details) and it's ready to use. Or use the NeatStamp editor to generate this kind of HTML with your real details automatically.

email-signature.html
<table cellpadding="0" cellspacing="0" border="0"
  style="font-family: Arial, sans-serif; font-size: 14px;
         color: #1a1a1a; max-width: 600px;">
  <tr>
    <td style="padding-right: 16px; vertical-align: top;
               border-right: 2px solid #e2e8f0;">
      <!-- Headshot or logo -->
      <img
        src="https://yourcdn.com/headshot.jpg"
        width="80"
        height="80"
        alt="Jane Smith"
        style="display: block; border-radius: 50%;
               width: 80px; height: 80px;"
      />
    </td>
    <td style="padding-left: 16px; vertical-align: top;">
      <!-- Name -->
      <p style="margin: 0; font-size: 16px; font-weight: bold;
                color: #0f172a;">Jane Smith</p>
      <!-- Title -->
      <p style="margin: 4px 0 0 0; font-size: 13px;
                color: #64748b;">Senior Designer, Acme Inc</p>
      <!-- Divider -->
      <p style="margin: 10px 0; border-top: 1px solid #e2e8f0;"></p>
      <!-- Contact details -->
      <p style="margin: 0; font-size: 13px; color: #475569;">
        <a href="tel:+15551234567"
           style="color: #475569; text-decoration: none;">
          +1 555 123 4567
        </a>
        &nbsp;·&nbsp;
        <a href="https://acmeinc.com"
           style="color: #2563eb; text-decoration: none;">
          acmeinc.com
        </a>
      </p>
      <!-- Logo -->
      <p style="margin: 10px 0 0 0;">
        <a href="https://acmeinc.com">
          <img
            src="https://yourcdn.com/logo.png"
            width="100"
            height="32"
            alt="Acme Inc"
            style="display: block; width: 100px; height: 32px;"
          />
        </a>
      </p>
    </td>
  </tr>
</table>
Outer table

Sets max-width to 600px and establishes the table context. The cellpadding='0' cellspacing='0' border='0' attributes prevent default table spacing that varies across clients.

Image with explicit dimensions

Both the HTML width/height attributes AND the CSS style dimensions are set. This is redundant but intentional — Outlook reads the HTML attributes, other clients may prefer the CSS.

border-right divider

A simple border-right on the left cell creates a vertical divider. This is more reliable than a separate <td> with a background color, which some clients render inconsistently.

vertical-align: top

Without this, table cells default to vertical-align: middle, which can look odd when one column is taller than the other. top alignment keeps content anchored to the top of each cell.

margin: 0 on paragraphs

Different clients add different default margins to <p> tags. Setting margin: 0 on every paragraph and using padding on the parent cell for spacing gives consistent results.

CSS properties that work (and don't work) in email

The honest status of the properties you're most likely to reach for.

CSS PropertyGmailOutlook 365Apple MailNotes
font-family✓ YesPartial✓ YesWeb fonts ignored by Outlook. Use web-safe fallbacks.
font-size, font-weight✓ Yes✓ Yes✓ YesFully supported everywhere.
color✓ Yes✓ Yes✓ YesWorks reliably in all clients.
background-color✓ YesPartial✓ YesWorks on table cells. Inconsistent on divs in Outlook.
padding (inline)✓ YesPartial✓ YesUse cellpadding on tables in Outlook for better results.
border✓ YesPartial✓ YesSimple borders work. Shorthand (border: 1px solid #ccc) can fail in Outlook — use individual properties.
border-radius✓ Yes✗ No✓ YesOutlook ignores border-radius entirely. Circular images need the image pre-cropped.
display: flex✓ Yes✗ No✓ YesDon't use. Breaks Outlook completely.
display: grid✓ Yes✗ No✓ YesDon't use. Same as flexbox.
floatPartial✗ No✓ YesAvoid. Causes unpredictable layout in Outlook.
position: relative/absolute✓ Yes✗ No✓ YesNot supported in Outlook. Don't use.
max-width✓ YesPartial✓ YesUse width for Outlook compatibility. max-width may be ignored.
line-height✓ Yes✓ Yes✓ YesWorks consistently.
text-align✓ Yes✓ Yes✓ YesWorks consistently.
@media queriesPartial✗ No✓ YesGmail supports media queries on newer versions. Outlook does not.

Data based on testing in Outlook 365 (Windows), Gmail (Chrome browser), and Apple Mail on macOS Sonoma, March 2026.

Testing your HTML signature

There's no substitute for actually sending the email and checking it. Here's how to do it properly.

The fast way: email yourself

Set the signature in your email client, compose a new email to an address you control, and check it in the clients you care about. For most people that means: Outlook on Windows (if you use it), Gmail in Chrome, and your phone's native mail app. If it looks right in those three, you're probably fine for 95% of recipients.

For thorough pre-deployment testing: Litmus or Email on Acid

Both tools let you paste HTML and see rendered previews across 90+ email clients without sending a single email. You'll see exactly what your signature looks like in Outlook 2016, Outlook 2021, Gmail app on Android, Samsung Mail, and dozens of others. Litmus starts at around $79/month (overkill for individual use, sensible for agencies). Email on Acid has a one-time test option.

For a company-wide rollout, this kind of testing is worth the cost. The first time a senior executive's signature shows up broken in a client pitch email, you'll wish you'd tested first.

What to look for when testing

  • → Does the layout hold? Check for collapsed columns or elements stacking unexpectedly.
  • → Are images loading? Look for broken image icons (indicates a bad URL or blocked images).
  • → Is there an attachment paperclip? That's base64 embedding — switch to hosted URLs.
  • → Is the font correct? If it looks like Times New Roman in Outlook, your font stack fallback isn't working.
  • → Are the links clickable? Test phone, email, website, and social links specifically.

The easy way: let NeatStamp generate it

Everything in this guide is what NeatStamp's generator handles automatically. When you build a signature in the editor, the exported HTML uses tables for layout, inline CSS only, hosted image URLs with explicit dimensions, and web-safe font stacks. You get the technically correct output without writing a line of HTML.

That said, if you're a developer who wants to write and maintain the HTML yourself — or if you need to integrate signature HTML into a larger system — this guide gives you everything you need to do it from scratch.

Generate HTML signature — freeOutlook installation guide →

Related guides

→Installing your signature in Outlook step by step→Installing your signature in Gmail→Outlook 365 specific signature guide→Email signature design best practices→What makes a professional email signature→Adding a logo to your email signature→Browse email signature templates→Best email signature generators compared→Create your HTML signature — free

Frequently asked questions

Can I use CSS in an HTML email signature?

Yes, but only inline CSS — style attributes on individual elements, not a <style> block in the <head>. Gmail strips <style> blocks entirely. Outlook ignores many CSS properties because it uses Word's rendering engine. Stick to inline CSS with basic properties: font-family, font-size, color, padding, and border.

Why does my HTML email signature look different in Outlook vs Gmail?

Outlook uses Microsoft Word as its HTML rendering engine (since Outlook 2007), while Gmail uses a browser-based renderer. Word's HTML support is significantly more limited — it doesn't support flexbox, CSS grid, many border styles, or web fonts. Gmail supports more modern CSS but strips out <style> blocks. You need to write HTML that works for both simultaneously.

Can I use flexbox or CSS grid in an email signature?

No, not reliably. Flexbox and CSS grid are not supported by Outlook's Word-based renderer. Use HTML tables for layout instead. It feels like going back to 1999, but tables are the only layout method that works consistently across all major email clients.

Do web fonts work in HTML email signatures?

Partially. Gmail and Apple Mail support web fonts loaded via @font-face or Google Fonts links. Outlook does not — it falls back to the system font stack. Always include a web-safe fallback: font-family: 'Your Font', Arial, sans-serif. The signature will use 'Your Font' in Gmail and Arial in Outlook.

Should I embed images as base64 or use URLs?

Use hosted URLs. Base64-embedded images are treated as attachments by Outlook, adding a paperclip icon to every email. Hosted URLs load from a server, keep email file size small, and don't trigger the attachment indicator. The downside is the image breaks if the server is down — use a reliable CDN.

How do I test my HTML email signature?

The fastest way: email yourself from the account with the new signature, open it on the clients you care about (Outlook on Windows, Gmail in Chrome, Apple Mail on iPhone). For thorough testing before a company-wide rollout, Litmus and Email on Acid can render your HTML across 90+ clients without sending actual emails.

What's the maximum width for an HTML email signature?

600px is the standard safe width. Most email clients display the reading pane at 600px or wider, but mobile screens can be narrower. Keep your signature table at 600px max-width and make sure it doesn't have any fixed-width elements that force horizontal scrolling on mobile.

Can I add a clickable phone number in an HTML email signature?

Yes — use a tel: link: <a href='tel:+15551234567'>+1 555 123 4567</a>. This makes the number tappable on mobile. On desktop it may launch a calling app (Skype, FaceTime) or do nothing, depending on the user's setup. It's still worth including.