HTML email signatures: making them render the same in Outlook, Gmail and Apple Mail

You design a flawless signature, send it to a colleague… and it arrives mangled: doubled spacing, a giant logo, a swapped font. That isn’t a bug in your signature — it is the reality of email: every email client interprets HTML its own way. Here is why, and how to write a signature that survives all of them.

Why rendering varies so much

A modern web browser follows shared standards. Email clients run on very different rendering engines:

• Outlook for Windows (classic) uses Microsoft Word’s rendering engine, not a browser’s. It ignores a large part of modern CSS: margins on some elements, max-width, CSS background-image, border-radius…
• Gmail rewrites incoming HTML, strips some attributes and limits the CSS it supports. Its signature editor also cleans up part of any pasted code.
• Apple Mail and Outlook for Mac are built on WebKit, which is far more permissive.
• Mobile apps add their own rules: automatic resizing, dark mode, system fonts.

A signature that works everywhere has to aim for the lowest common denominator.

The golden rules of signature HTML

1. Tables for layout

No flexbox, no grid, no float. A reliable signature layout is built with <table>, <tr> and <td>. Old-fashioned, but it is what Outlook understands.

2. Inline CSS

Styles go directly on each element (style="color:#181b30;font-size:14px"), not in a <style> block in the head, which can be stripped or ignored.

3. Safe fonts with fallbacks

font-family: Arial, Helvetica, sans-serif;

Web fonts (Google Fonts, brand fonts) load in only a minority of clients. Everywhere else, the fallback stack takes over.

4. Explicit image dimensions

Use the HTML width and height attributes as well as CSS. Outlook for Windows often ignores CSS sizes and shows the image at its real size — hence the giant logos. See our image rules.

5. Full hexadecimal colors

#3b40e6 rather than #34e or CSS variables. Avoid rgba colors for anything important.

6. Spacing with padding on cells

Margins are interpreted inconsistently. padding on <td> elements is far more reliable.

7. No JavaScript, no forms, no video

Every email client strips them. For a video, use a clickable image that links to it.

8. “Bulletproof” buttons

A button built from a colored table cell with a link inside displays everywhere. A pure-CSS border-radius button will be square in Outlook for Windows — acceptable if the design allows for it.

The copy-paste trap

The most common way to install a signature — design it in a tool, then copy-paste it into Outlook or Gmail — is also the most fragile. The clipboard transforms the HTML, the signature editor cleans it again, and the result differs from one computer to the next.

That is one reason a centralized deployment is more reliable: the signature is compiled server-side once, with controlled HTML, then installed directly — into Gmail through the API, into Outlook through an add-in. See our Gmail and Outlook guides.

Test before you deploy

Before rolling out a signature, test it at least on:

1. Outlook for Windows (classic)
2. New Outlook / Outlook on the web
3. Gmail in the browser
4. Gmail and Outlook on iOS and Android
5. Apple Mail
6. Dark mode in at least two of these clients

Each time, check the layout, image sizes, font, links, and readability in dark mode and on mobile.

Technical recap

Do	Avoid
<table> for structure	div + flexbox / grid
Inline CSS	<style> blocks, external stylesheets
Arial, Helvetica, Georgia…	Web fonts without fallbacks
width / height on images	CSS-only sizes
padding on cells	margin for spacing
Images hosted over HTTPS	Attached images, SVG
Absolute links (https://…)	Relative links, JavaScript

Following these rules takes discipline, but it pays off: a signature that looks the same for every one of your recipients.