How to write HTML email signatures that actually work
The complete guide to writing HTML email signatures. Table-based layout, inline styles, and what to avoid.
How to write HTML email signatures that actually work
- 1
Use a <table> as your outer container — Outlook uses Word's rendering engine which ignores CSS flexbox and grid.
- 2
Add cellpadding="0" cellspacing="0" border="0" to every table element to remove browser default spacing.
- 3
Apply all styles inline — Gmail strips <style> blocks from email signatures entirely.
- 4
Use Arial, Helvetica, or sans-serif as your font — web fonts (Google Fonts, etc.) do not load in email clients.
- 5
Use in empty <td> cells to prevent Outlook from collapsing them.
- 6
Link email addresses with href="mailto:…" and phone numbers with href="tel:…" for clickable links on mobile.
- 7
Test your final HTML in Gmail (paste with Cmd/Ctrl+Shift+V), Outlook for Windows, and Apple Mail before deploying.
Ready to build your signature?
Use the free generator below — no signup, no watermark, ready in 60 seconds.
// what people say
Loved by people who send a lot of email.
"I've tried four of these things. signcraft is the only one where my signature actually looks the way it did in the preview after I paste it into Gmail."
Elena Marrok
Brand Director, Vector Studio
"Rolled it out across our whole firm in an afternoon. Forty-two lawyers, one consistent look, zero IT tickets. That's basically a miracle."
Samir Rahimi
Managing Partner, Lumen Law
"I was about to pay someone $400 to design this. Did it in three minutes. Tasteful defaults — that's what I'm paying for, and it's free."
Jordan Tellez
Independent Consultant