Design & best practices

HTML Email Signature Guide

An HTML signature is a small formatted block added to outgoing mail. It can include links and images, but email clients apply stricter rules than web browsers.

Published by SendSignatures

Create your free email signature →

Why email HTML differs from web HTML

Email apps remove or reinterpret some HTML and CSS. A browser preview can therefore differ from the received message. Keep structure simple and test the signature after copying it into the final editor.

Tables and inline CSS

A small presentation table often behaves more predictably than CSS grid. Put essential typography, colours and spacing inline because stylesheet rules may be stripped. Keep the name and contact details as selectable text. Example: <table role="presentation"><tr><td style="font-family:Arial,sans-serif;font-size:14px">Alex Example</td></tr></table>

Fonts, hosted images and absolute URLs

Use system fonts with fallbacks. Host images at public HTTPS URLs, give them dimensions and alt text, and use absolute links. A local file path works only on the sender’s computer.

Unsupported CSS and JavaScript

Advanced positioning, selectors and media queries do not work reliably everywhere. Build a compact layout that remains readable if responsive CSS is ignored. JavaScript is blocked or removed by email clients and has no place in a contact signature.

Outlook and Gmail rendering

Classic Outlook may adjust spacing and scaling; new Outlook and web Outlook differ. Gmail sanitises pasted content and may change unsupported markup. Use the Outlook image checklist if a logo disappears.

Test the installed result

Send a new message, reply and forward. Open them on desktop and mobile with images both enabled and blocked. Check links, wrapping, typography and reading order. The generator provides an email-safe starting point.

Ready to create yours?

Create a professional email signature with SendSignatures.

Open the free generator →