How to Build a Professional HTML Email Signature That Works in Every Client

A broken email signature is worse than no signature at all. Images that do not load, fonts that fall back to Comic Sans, and layouts that collapse into a single column all signal the same thing: the sender does not test their work. This guide shows you how to build a clean, reliable HTML email signature using tables, inline CSS, and client-safe markup — then test it everywhere it matters.

1. Why HTML Signatures Still Matter

Email is the last universal business channel. Every platform, every CRM, and every newsletter tool eventually exports to an inbox. A signature is the one piece of branding that travels with every message you send — without you thinking about it.

A good signature does three things: it tells the recipient who you are, it gives them one clear way to respond, and it looks the same no matter what client they use. A bad signature does the opposite: it breaks layouts, triggers spam filters with oversized images, and wastes the most reliable touchpoint you have.

2. The Table-Layout Rule

Modern web developers avoid HTML tables for layout. Email developers use almost nothing else. The reason is simple: email clients do not consistently support Flexbox, Grid, or even margin on block elements. Tables, on the other hand, have been supported since the late 1990s and every major client understands them.

Your signature should be a single <table> with one row and two cells. The left cell holds your name and role. The right cell holds your contact links. A thin vertical border between them adds structure without complexity. No floats, no absolute positioning, no CSS Grid.

Use inline CSS only. External stylesheets are stripped by most webmail clients, and <style> blocks in the <head> are often ignored or removed. Every font-family, color, padding, and border must live on the element itself as a style="" attribute.

3. What to Include (and What to Skip)

Signatures grow over time. Resist the urge to add every social profile, every award, and every tagline. A signature is not a resume; it is a business card that fits at the bottom of a message.

Include

Your name and role. One line. No job-title inflation.
One email address. Linked with a mailto: so it is clickable.
One URL. Your company or personal site. Also linked.
A thin separator. A 1-pixel vertical rule or horizontal line adds visual structure.

Skip

Images and logos. Many clients block external images by default. If the image is essential, it becomes invisible. If it is decorative, it becomes a broken-link icon. Text-only signatures are more reliable.
Social icons. They are images. See above. Plain text links to one or two profiles are acceptable, but every additional link dilutes the one you actually want clicked.
Legal disclaimers. If your jurisdiction requires them, keep them in a separate plain-text block below the signature, not inside the HTML table.
Animated GIFs. They increase spam scores and break in mobile clients.

Want a signature without writing markup? The Company ships a Minimal HTML Template Pack with clean, tested components you can adapt. For a fully custom signature designed for your brand, see our email signature design service.

4. Client Quirks You Must Know

Not all email clients render HTML the same way. Here are the four that matter most and how they behave.

Gmail (web and mobile)

Gmail strips <head> and <style> blocks entirely. It also removes classes and IDs. Inline styles on table cells and text elements survive, but anything that relies on a stylesheet is lost. Gmail adds extra spacing around some block elements, so keep margins at zero and use cellpadding and cellspacing="0" on the table instead.

Outlook (Windows desktop)

Outlook uses Microsoft Word as its rendering engine, not a browser. This means it supports almost no modern CSS. It ignores line-height percentages, mishandles padding on <p> tags, and can stretch images unpredictably. The safest approach is to put all text inside <td> cells, use <br> for line breaks instead of <p>, and avoid div elements entirely.

Apple Mail (macOS and iOS)

Apple Mail has the best HTML and CSS support of any major client. It handles inline styles well and respects font stacks. The only common issue is that it can apply its own link-color styling (blue underlined text) unless you explicitly set style="color:#111;text-decoration:none;" on every <a> tag.

Thunderbird

Thunderbird is forgiving but strict about security. External images are blocked by default, and remote stylesheets are never loaded. Keep everything self-contained in the HTML body and you will have no problems.

5. A Ready-to-Use Template

The template below is a single-row, two-column table with inline CSS. It uses a system font stack so it degrades gracefully on every OS. Copy it, edit the text, and paste it into your email client.

<table cellpadding="0" cellspacing="0" border="0" style="font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:14px;color:#111;line-height:1.5;">
  <tr>
    <td style="padding-right:12px;border-right:2px solid #111;">
      <strong style="font-size:15px;">Alex Doe</strong><br>
      <span style="color:#555;">Product Designer</span>
    </td>
    <td style="padding-left:12px;">
      <a href="mailto:alex@example.com" style="color:#111;text-decoration:none;">alex@example.com</a><br>
      <a href="https://example.com" style="color:#111;text-decoration:none;">example.com</a>
    </td>
  </tr>
</table>

To use this template:

Copy the code block above into a text editor.
Replace Alex Doe, Product Designer, the mailto: address, and the URL with your own details.
Open your email client’s signature settings and paste the HTML. Some clients have an "HTML source" or "raw" paste option; use it if available.
Send a test message to yourself and check it on desktop and mobile.

If your client does not support HTML signatures directly, paste the plain-text version instead. Not every client needs a table.

6. Testing Your Signature

Before you declare a signature finished, test it in at least four environments:

Gmail in Chrome (desktop)
Gmail app on Android or iOS
Apple Mail on macOS or iOS
Outlook on Windows (if your recipients include enterprise users)

Send the same message to an account you control on each platform. Look for collapsed layout, missing borders, unexpected font changes, and broken links. If anything is off, move the styling closer to the element — deeper inline styles, fewer abstractions.

7. The Plain-Text Fallback

Not every message is HTML. Some recipients prefer plain text, some mailing lists strip HTML, and some automated systems log only the text body. A plain-text signature is a simple block of text that mirrors the HTML version without markup:

Alex Doe | Product Designer
alex@example.com
https://example.com

Many email clients let you set a separate plain-text signature. If yours does not, the client usually converts the HTML to text automatically — but the result is often messy. Setting a manual plain-text version guarantees consistency when HTML is stripped.

Need a signature for a team? The Company designs branded HTML and plain-text signatures for communicators, marketers, and operators. Every signature is tested in Gmail, Outlook, and Apple Mail before delivery. See our design services or download the open signature templates we use internally.