← All posts
TechnicalJune 25, 2026·4 min read
Why HTML email signatures break (and how to fix them)
You build a signature, it looks flawless, you paste it into Gmail, and the spacing collapses or the colours vanish. This is almost always because email clients render HTML very differently from web browsers.
The root cause
Modern websites lay things out with flexbox, grid, and external stylesheets. Email clients support almost none of that. Many strip <style> blocks entirely and ignore modern CSS, so a layout that depends on them simply falls apart.
The approach that works
- Tables for layout. It feels dated, but tables are the only layout primitive every email client agrees on.
- Inline styles. Put styling directly on each element with the
styleattribute instead of in a stylesheet. - Web-safe fonts. Arial, Helvetica, Georgia. Anything else falls back unpredictably.
- Absolute, hosted images. Or small inline data URIs. Never local file paths.
Avoid these
- Background images. Outlook in particular ignores them.
- CSS animations and JavaScript. Both are stripped for security.
- External stylesheets and web fonts.
This is exactly why Signify generates table-based HTML with inline styles. You get a signature that looks the same in Gmail, Outlook, and Apple Mail without thinking about any of it.
