SignForge

HTML Email Signature

An HTML email signature uses markup and inline styles to produce a formatted block — colours, fonts, images, links — that appears consistently across email clients. The key constraint is that HTML in email is not the same as HTML in a browser. Two rendering engines dominate: Outlook's Word engine (strict, table-only) and Gmail's webmail engine (more capable but strips <style> blocks). Both must be satisfied simultaneously.

Generate HTML Signature Code

SignForge outputs table-based HTML with inline CSS — compatible with Gmail and all Outlook versions. Free, no signup.

Create My Signature →

Works with Gmail, Outlook, Apple Mail & more

HTML Requirements by Email Client

Outlook (2016, 2019, 2021, 365 desktop)

Microsoft Word HTML engine
  • •Tables only — no flexbox, grid, or float
  • •Inline CSS only — style blocks ignored
  • •Images need width HTML attribute + inline CSS width (DPI fix)
  • •No border-radius support
  • •No CSS variables or calc()
  • •No @font-face or external fonts

Gmail (web)

Webmail / browser
  • •<style> blocks stripped entirely
  • •Inline CSS required for all styling
  • •No base64 images in signature blocks
  • •No Google Fonts (link tags stripped)
  • •Supports: color, font-size, font-family, margin, padding, border, width, max-width
  • •10,000-character limit on total signature HTML

Apple Mail

WebKit browser engine
  • •Most CSS supported including border-radius
  • •Web fonts supported via @font-face (but Outlook users won't see them)
  • •Best rendering fidelity — but you can't target it without breaking other clients
  • •Design for Outlook/Gmail constraints and Apple Mail will also work

Outlook Web (OWA)

Browser (Chromium-based)
  • •More permissive than desktop Outlook
  • •Supports more modern CSS
  • •But desktop Outlook users won't get the same result
  • •Design for desktop Outlook — OWA will render it correctly too

Minimum Working HTML Structure

A two-column signature that works in all clients:

<table border="0" cellpadding="0" cellspacing="0" width="540" style="max-width:540px;font-family:Arial,Helvetica,sans-serif;">
<tr>
<!-- Logo column -->
<td valign="top" style="padding-right:16px;vertical-align:top;">
<img src="https://example.com/logo.png" width="120" height="32" alt="Company" style="width:120px;max-width:120px;display:block;border:0;" />
</td>
<!-- Details column -->
<td valign="top" style="vertical-align:top;border-left:2px solid #2563EB;padding-left:16px;">
<p style="margin:0;font-size:17px;font-weight:700;color:#111111;">Jane Smith</p>
<p style="margin:2px 0 6px;font-size:13px;color:#555555;">Marketing Director</p>
<p style="margin:0;font-size:12px;color:#777777;">+44 7700 900000 · jane@company.com</p>
</td>
</tr>
</table>

How to Install an HTML Signature

Gmail

Do not paste raw HTML code. Copy the rendered/formatted version from your generator's preview. In Gmail: Settings (gear) → See all settings → General → Signature → Create new → paste with Ctrl+V. Gmail reads the clipboard's HTML format and preserves inline styles.

Outlook (Windows)

Outlook accepts formatted paste. Copy from the generator preview. File → Options → Mail → Signatures → New → click in the editing area → paste with Ctrl+V. If Outlook is in HTML compose mode (File → Options → Mail → 'Compose messages in this format: HTML'), formatting is preserved.

Outlook Web (OWA)

Settings gear → View all Outlook settings → Mail → Compose and reply → click in the signature box → paste. OWA preserves inline styles and images.

Apple Mail

Mail → Settings → Signatures → select account → click + → name it → paste in the right panel. If it shows as plain text, go to Format → Make Rich Text in the composition area first.

Common HTML Signature Bugs and Fixes

Bug: Phantom gap below images

Fix: Add display:block to every img tag. Inline images have a 4px descender space by default — display:block collapses it.

Bug: Extra spacing between paragraph elements

Fix: Add margin:0 to every p tag. Email clients apply different default paragraph margins. Without margin:0, Outlook adds 16px above and below each paragraph.

Bug: Columns stacking vertically in Outlook

Fix: Your layout uses CSS flexbox or grid. Replace with HTML table columns (td elements). Outlook's Word engine ignores display:flex entirely.

Bug: Logo appears oversized on some monitors

Fix: Outlook DPI scaling bug. Add both width='160' (HTML attribute) and style='width:160px;max-width:160px;' (inline CSS) to the img tag.

Bug: Links showing blue regardless of colour style

Fix: Some email clients enforce link colour. Add !important is not reliable — instead set the style directly on the a tag: style='color:#2563EB;text-decoration:none;'.

Related Guides

Generate Your HTML Email Signature

Table layout, inline CSS, zero style blocks — correct HTML for every client. Free, no signup.

Create My Signature →

Works with Gmail, Outlook, Apple Mail & more