SignatureAI

HTML email signature

An HTML signature is just a small web page pasted under your emails. The catch is that email clients are much pickier than browsers, and each one is picky in a different way. Switch between them below to see what survives.

Built like a web page
Maya Okafor
Senior Product Designer · Northwind
Built with tables + inline styles
Maya Okafor
Senior Product Designer · Northwind
FeatureResultWhy
<style> block and CSS classes✕ droppedWord's editor rewrites your HTML and keeps only its own styles.
Flexbox / div layout✕ droppedWord ignores display:flex and most div padding, so side-by-side blocks stack.
border-radius (round photo)✕ droppedIgnored: the photo shows square.
Web font (@font-face)✕ droppedFalls back to Times New Roman unless a web-safe fallback is given, and even then Word sometimes picks Times.
CSS background image / gradient✕ droppedIgnored without VML hacks. Use a solid bgcolor instead.

A simplified simulation for teaching; real results also depend on client version and the recipient's app.

The rules the generator follows

  1. Tables for layout. Every column, divider and button is a <table> cell with cellpadding="0" cellspacing="0" border="0" and role="presentation" so screen readers don't announce a data table.
  2. Inline styles only. Every element carries its own style="". No <style> block, no classes, nothing Gmail can strip.
  3. Web-safe font stacks. E.g. Arial, Helvetica, sans-serif, with mso-line-height-rule:exactly so Outlook honours the line height.
  4. Hex colours, doubled up. Filled cells get both the old bgcolor attribute and background-color, because some Outlook builds only read one.
  5. Sized images. Every <img> has a width attribute, display:block and border:0, plus alt text. Without the attribute, Outlook shows the image at its file's natural size.
  6. Absolute links. https://, mailto: and tel: links, so phone numbers are tappable on phones.
  7. Text, not pictures of text. Name, phone and email are real text, so they are visible when images are blocked and searchable in the inbox.

Where HTML signatures go wrong

  • Building it in Word or Google Docs. Pasting from a document brings along hidden styles that bloat the code and shift spacing.
  • One big image as the signature. Nothing is clickable, it's invisible when images are blocked, and it looks like spam to filters.
  • Local file paths. C:\Users\…\logo.png works on your computer only.
  • Editing after pasting. Outlook's and Gmail's editors can rewrite your HTML. Make changes in the generator and paste again.

Dark mode

Apple Mail, Gmail's apps and Outlook's apps can recolour emails in dark mode, but they each do it differently: some leave colours alone, some invert light backgrounds only, some invert everything. You can't control this from a signature. What you can do: avoid pure-black text on transparent logos (give the logo a white background with a little padding), and choose a mid-tone accent colour that reads on both. The generator's Dark preview approximates a full inversion so you can spot problems.

A logo that vanishes in dark mode hasn't changed at all; only the light around it has. The Moon is the same: it never changes shape, and ahaboo shows why its lit side still seems to grow and shrink.

Getting the code

In the generator, Copy HTML copies the raw source (for Outlook's signature files, CRMs and signature-management tools) and Download .html saves a standalone file. For install steps, see Outlook, Gmail and Apple Mail.

Questions people ask

What is an HTML email signature?

A signature written as HTML, so it can contain formatting, colours, links and hosted images, rather than plain text. Every signature with a coloured name or a clickable logo is an HTML signature.

Why do email signatures still use tables?

Because classic Outlook for Windows renders email with Microsoft Word, which ignores most CSS layout (flexbox, grid, floats, many div paddings). Tables are the one layout method that every major client respects.

Can I use a custom font in my email signature?

You can list one, but Gmail and Outlook will not load it and fall back to your next font. Pick a web-safe font like Arial, Verdana, Georgia or Trebuchet MS so what you design is what people see.

How do I add an HTML signature to Gmail?

Gmail has no HTML source box. Open the HTML in a browser, copy the rendered signature and paste it into Settings > Signature. Our generator's Copy signature button does exactly that in one step.

Should I embed images as base64?

No. Gmail strips base64 images from signatures and Outlook turns embedded images into attachments. Host them at a public https:// URL.