How to Build a Professional Email Signature That Survives Gmail and Outlook

Your email signature is the one piece of design that ships with every message you send. A sales rep who emails 40 prospects a day puts their signature in front of 40 sets of eyes daily, whether anyone opens the message or not. So it is worth getting right. The trouble is that most "modern" signature builders produce HTML that looks gorgeous in the preview pane and then falls apart the moment a recipient opens it in Outlook desktop. This guide walks through what to put in a signature, why the markup has to be built a specific old-fashioned way, and how to install the result in the two clients almost everyone uses.

What actually belongs in a signature

A good signature answers one question for the reader: who is this and how do I reach them? Everything else is decoration that competes with that answer. Keep it tight:

Name — your real, full name, slightly larger or bolder than the rest.
Title and company — "Account Executive, Northwind Logistics" tells the reader your role and who you speak for in one line.
One or two contact methods — a direct phone line and an email, or a phone line and a website. You do not need all five channels; pick the ones you actually want people to use.
At most a couple of links — a company site and a single social profile (usually LinkedIn for business, GitHub for developers). More than two links and the signature starts to read like a link farm.

What to leave out: inspirational quotes, a legal disclaimer longer than your actual message, six social icons, an animated GIF, and a 600-pixel-wide banner image. Every one of those dilutes the signal and adds weight to a block that appends to every single email in a thread. A signature that stays under roughly four or five lines reads as confident; one that scrolls reads as noise.

Why HTML signatures use inline-styled tables

Here is the concrete technical point that trips up almost everyone. Email clients are not browsers. They do not render the way a web page does, and they actively strip the things you would reach for first.

Gmail removes <style> blocks and class attributes entirely before it displays a message. Outlook on the desktop is worse: it renders HTML using Microsoft Word's layout engine, which has no support for flexbox, no CSS grid, and shaky support for floats, margins, and background images. So if you build a two-column "logo on the left, details on the right" signature with a display: flex container — the obvious modern approach — Gmail throws away your stylesheet and Outlook ignores the layout, and your signature collapses into a vertical stack with the logo stranded on its own line.

The approach that every major client honors is the one web developers abandoned fifteen years ago: nested HTML <table> elements with inline style attributes on each cell. A table cell with style="padding:0 12px;vertical-align:top" is understood by Gmail, Outlook desktop, Outlook web, Apple Mail, and Thunderbird alike, because table layout predates the CSS features they dropped. Inline styles survive because there is no stylesheet to strip — the styling lives directly on the element. This is exactly why a reliable signature uses nested tables with inline styles, includes the name, title, company, one or two contacts, and at most a couple of links, and nothing fancier.

The email signature generator emits precisely this kind of markup — no <style> block, no class names, no flexbox — so you get a layout that holds together instead of one that looks good only until it leaves your outbox.

A worked example: a clean account manager signature

Say Sarah Chen is an account manager at Northwind Logistics. A tasteful, table-based structure for her looks like this, conceptually:

[ outer table ]
  [ row ]
    [ cell: avatar ]   [ cell: text block ]
      48x48 logo          Sarah Chen            (name, bold, ~16px)
      or photo            Account Manager       (title, ~13px, grey)
                          Northwind Logistics   (company, accent color)
                          ─────────────────     (1px accent rule)
                          +1 (415) 555-0142     (phone, ~13px)
                          sarah@northwind.co    (email link)
                          northwind.co · LinkedIn  (two links, accent color)

That is two table cells in a single row: the image on the left, a stacked text block on the right. The name sits at the top in bold, the title and company follow in a muted grey, a thin one-pixel rule in the brand color separates identity from contact details, and the bottom line carries exactly two links. No banner, no quote, no second image. It reads in under a second, and because it is built from a nested table with inline styles, it renders the same in Sarah's colleague's Outlook desktop as it does in the recipient's Gmail.

If she wanted a scannable touch, she could generate a small image with the QR code generator, host it at a public URL, and drop that into the avatar slot — but that is a flourish, not a requirement.

Installing it in Gmail and Outlook

Once the HTML is generated, copying it in as rich text carries the formatting through the clipboard, which is the trick that makes this painless.

Gmail. Click the rich copy. In Gmail, open the gear icon, then "See all settings," then the "General" tab, and scroll to "Signature." Create a new signature, click into the edit box, and paste with Cmd/Ctrl+V. The colors, links, and table layout come through because the clipboard is carrying rich HTML, not plain text. Scroll to the bottom and click "Save Changes" — Gmail does not save automatically, and this is the step people forget.

Outlook. In new Outlook or Outlook on the web, go to Settings, then "Mail," then "Compose and reply," and paste the rich copy into the signature editor. In classic Outlook desktop, it is File, then "Options," then "Mail," then "Signatures," and you paste there. If a client or CRM only accepts raw markup, use the HTML-source copy instead and paste it into the HTML field.

One rule that saves a lot of grief: send yourself a test email to each client you actually care about before rolling a signature out. A signature that looks flawless in the browser preview can still shift in Outlook desktop's Word renderer, and you want to catch that on your own screen, not in a customer's inbox.

Keeping it tasteful (and a note from me)

I have collected my share of bad signatures. The worst offender I ever got was from a vendor whose signature was a 200KB image of text — no selectable email, no real link, and a broken icon for half the recipients because the image lived behind a login. I could not copy his phone number or click his address; I had to retype everything by hand. That taught me the whole lesson in one go: a signature exists to be used, not admired. Keep the text as real text, host any image at a public https:// URL, and resist the urge to add a sixth element just because there is room.

Taste here is mostly restraint. Pick one accent color that matches your brand and use it for the company name and the divider rule, nothing else. Keep the type to two sizes. Limit yourself to two links. If you build the signature with a host of details and then look at it and feel the urge to delete a line, delete the line — the version you are tempted to trim is almost always the better one. When you are done, it should feel like a business card: small, legible, and immediately useful.

Made by Toolora · Updated 2026-06-13