HTML email signature
Every formatted email signature is HTML underneath. The difference between one that looks right everywhere and one that falls apart in Outlook is how that HTML is written. Here is what works, a real example of the code, and where to use it.
What makes an HTML signature work in every email app
- Tables for layout. Classic Outlook for Windows uses Word's engine and ignores flexbox, grid and floats. Tables keep columns where they belong.
- Inline styles only. Signature editors often strip style blocks and classes; a
style="…"on each element survives. - Images linked by https URL, with a width. Embedded or base64 images become attachments or get blocked; without a width, Outlook can show a logo at full size (see recommended sizes).
- No SVG, no scripts, no web fonts. Gmail doesn’t display SVG; no email app runs scripts; web fonts fall back to something else.
- Small. Gmail’s limit is 10,000 characters. Simple signatures need far less.
A real example
This signature, and the exact HTML the generator produces for it:
HR business partner
| Tomás Rivera (he/him) | HR Business Partner | Solstice Retail |
| (602) 555-0118 · tomas.rivera@solsticeretail.example |
| Made with Fairsig |
HR emails often deliver sensitive news, so the signature stays small and plain. Pronouns are a simple signal that the team takes inclusion seriously.
<table cellpadding="0" cellspacing="0" border="0" role="presentation" dir="ltr" style="border-collapse:collapse;font-family:Arial, Helvetica, sans-serif;font-size:13px;line-height:1.45;color:#1f2937;direction:ltr;text-align:left;">
<tr>
<td style="padding-bottom:2px;">
<span style="font-weight:bold;color:#1f2937;">Tomás Rivera</span> <span style="font-size:12px;font-weight:normal;color:#6b7280;">(he/him)</span>
<span style="color:#6b7280;"> | </span>
<span style="color:#6b7280;">HR Business Partner</span>
<span style="color:#6b7280;"> | </span>
<span style="color:#6d28d9;font-weight:bold;">Solstice Retail</span>
</td>
</tr>
<tr>
<td style="padding-bottom:2px;">
<a href="tel:6025550118" style="color:#1f2937;text-decoration:none;">(602) 555-0118</a>
<span style="color:#6b7280;"> · </span>
<a href="mailto:tomas.rivera@solsticeretail.example" style="color:#1f2937;text-decoration:none;">tomas.rivera@solsticeretail.example</a>
</td>
</tr>
<tr>
<td colspan="1" style="padding-top:8px;font-size:10px;line-height:1.4;color:#6b7280;">
<a href="https://fairsig.com/?ref=sig" style="color:#6b7280;text-decoration:none;text-decoration:underline;">Made with Fairsig</a>
</td>
</tr>
</table>1,175 characters. Line breaks were added here for reading; the copied code is on one line.
How to get the code
- Pick a template in the generator (or start from one of the templates) and fill in your details.
- Click Copy HTML to copy the code, or Download .html to save it as a file.
- For Gmail, Outlook or Apple Mail, use Copy signature instead and paste it into the signature settings: those editors take the formatted signature, not the code.
Where to paste HTML (and where not)
| App | Paste | Guide |
|---|---|---|
| Gmail | The formatted signature (Copy signature) | Gmail |
| Outlook (new, classic, web, Mac) | The formatted signature (Copy signature) | Outlook |
| Apple Mail, iPhone | The formatted signature (Copy signature) | Apple Mail, iPhone |
| Thunderbird | The HTML code, with “Use HTML” ticked | Thunderbird |
| CRMs, help desks, marketing tools | The HTML code, in their HTML or source mode | the tool’s own help |
More HTML signatures
Each one below is the same kind of table-based HTML; open it in the generator to get its code.
CEO with company logo
 | Priya Raman Chief Executive Officer Meridian Analytics | |
| ||
| Made with Fairsig | ||
Executives rarely need a photo: the logo carries the brand, and the contact band keeps a long address readable. No social links, because a CEO's inbox is not a marketing channel.
Product designer with pronouns
 | Sam Okafor (they/them) Senior Product Designer Tidewater Health   |
| Made with Fairsig | |
The website doubles as a portfolio link, and the pronouns sit quietly next to the name. Two color icons are enough: more would compete with the work itself.
Ready? The free Fairsig generator builds a signature that works in Gmail, Outlook and Apple Mail, in your browser, with no sign-up. Generate your HTML signature →
Questions
Can I paste HTML code into Gmail's signature box?
No. Gmail's signature editor takes formatted content, not code. Open the signature in the generator, click Copy signature and paste it: Gmail receives the rendered signature, built from the same HTML.
Where can I use the HTML code itself?
In tools that accept HTML: Thunderbird (its “Use HTML” option), signature fields in CRMs, help desks and email marketing tools, website footers, or a .html file your IT team deploys. Use Copy HTML or Download .html in the generator.
Why tables? Isn't that old-fashioned?
On the web, yes. In email, no: classic Outlook for Windows renders messages with Word's engine, which ignores flexbox, grid and floats. Tables with inline styles are what every major email app displays the same way.
Can I use a custom font in an HTML signature?
Not reliably. Most email apps don't load web fonts in signatures, and classic Outlook ignores them. Use a web-safe font for the text, and put a brand font only inside your logo image.
How long can an HTML signature be?
Gmail refuses signatures over 10,000 characters of HTML. The examples on this site produce roughly 900 to 2,600; the generator counts as you type and warns you from 9,000.