SIGNATURE PLAYBOOK
Build a signature that actually gets replies
A great email signature is a tiny landing page — it should answer "who are you, how do I reach you, and what's the next step?" in under five seconds. Use the recipes, layout rules, color theory, and troubleshooting below to get it right the first time.
60 sec to ship Gmail · Outlook · Apple Mail 8 templates
Start here
8 signature recipes by role
Pick the role that matches yours. Each recipe is a real signature pattern we see working in the wild — copy it as-is, or adapt the structure to your context. Every recipe includes a one-line explanation of why it works.
Sales signature
Reply-rate boosting outbound signature
Sarah Chen • Senior Account Executive Acme Corp | acme.com 📞 +1 (415) 555-0142 • ✉️ sarah@acme.com 🗓️ Book a 15-min call: calendly.com/sarah-demo LinkedIn: linkedin.com/in/sarachen
Why it worksAlways include one CTA — the meeting link. Studies show signatures with a single CTA get 3-5× more clicks than plain contact info.
The four blocks
Anatomy of a great signature
Every professional signature is made of the same four blocks. The order, weight, and density of each block changes by role — but the blocks themselves are universal. The biggest mistake people make is adding a fifth block (banner, quote, certification list). Don't.
01
Identity
Name + title + company
Three lines max. The reader needs to know who you are, what you do, and where you work in 3 seconds.
❌ Avoid
John Doe, Senior Software Engineer, Team Lead, Backend Infrastructure, Acme Corp Inc., USA, Earth
✓ Do this
John Doe Senior Software Engineer, Acme Corp
02
Contact
Phone + email + website
Include the channel the recipient should actually use. If you never pick up the phone, drop the phone number.
❌ Avoid
P: +1 (555) 123-4567 | M: +1 (555) 765-4321 | F: +1 (555) 999-0000 | E: john@x.com | W: ...
✓ Do this
📧 john@acme.com • 🌐 acme.com/john
03
Proof
Photo, logo, or credentials
One visual element. Two visuals fight for attention and look amateur. Pick the one that builds the most trust for your role.
❌ Avoid
Photo on the left, logo on the right, certification badge underneath, banner on top
✓ Do this
Either a headshot OR a company logo — not both
04
Action
One CTA (or none)
If you want a meeting, link a calendar. If you want traffic, link a landing page. Never both. Never 'click here'.
❌ Avoid
Book a call | Read my blog | Follow me | Subscribe to my newsletter | Download my ebook
✓ Do this
🗓️ Book 15 min with me: calendly.com/john-acme
Color theory
Pick a brand color that matches your role
The color of your name, divider, and CTA should do silent work — reinforce the impression you want to leave. The presets below are tuned for common roles, but the rule is simple: pick the tone that matches what you want the reader to feel, not what's already on your business card.
Royal Blue
#2563eb
Trust, corporate, professional services
Best for: Sales, finance, legal, healthcare
Forest
#059669
Stable, calm, sustainable, organic
Best for: Sustainability, wellness, education
Slate
#475569
Restrained, editorial, mature
Best for: Consulting, journalism, agencies
Charcoal
#111827
Premium, minimal, high-contrast
Best for: Luxury, design, architecture
Crimson
#dc2626
Confident, urgent, bold
Best for: Sales, media, advocacy
Amber
#d97706
Warm, friendly, optimistic
Best for: Hospitality, education, coaching
Violet
#7c3aed
Creative, modern, distinctive
Best for: Tech, creative, gaming
Teal
#0d9488
Fresh, technical, balanced
Best for: Healthcare, finance, SaaS
Typography
Web-safe font pairings that ship anywhere
Always use web-safe fonts in your signature. Custom webfonts look great in your portfolio but render as the recipient's system default in Outlook — so you lose all the personality. The six pairings below ship identically on every device.
Arial / Helvetica
Universal, clean, default-safe
Default for most industries. Renders identically on every device.
Georgia
Editorial, trustworthy, serif
Consulting, publishing, legal. Adds authority without looking fussy.
Verdana
Highly legible at small sizes
Best for finance and technical emails where readability beats personality.
Trebuchet MS
Friendly, modern, slightly humanist
Marketing, creative, consumer brands that want warmth without losing professionalism.
Tahoma
Compact, professional, dense
When you need to fit more info (multiple phones, full address) without bloating the signature.
Courier New
Monospaced, technical, distinctive
Dev shops, infosec, or when you want a signature that looks like a terminal header.
CTA design
The CTA playbook
A call-to-action turns a signature from a contact card into a conversion surface. The rules below are the same ones used by sales teams that book thousands of meetings a quarter from cold email alone.
Do
Link a real calendar (Calendly, Cal.com, SavvyCal)
Don't
Link a 'contact us' form on your website
Do
Use a single, specific verb ('Book a 15-min call')
Don't
Use generic CTAs ('Learn more', 'Get in touch', 'Click here')
Do
Match the CTA to the recipient
Don't
Send the same CTA to a customer and a stranger
Do
Track clicks (utm_source=email) so you know what works
Don't
Ship a CTA you can't measure
Do
Keep CTA copy under 6 words
Don't
Write a sentence-long CTA inside your signature
Troubleshooting
When it breaks in someone else's inbox
Six things that always go wrong and the specific fix for each. If your signature looks fine in Gmail web but ugly in Outlook desktop, the answer is in this section.
01Signature looks perfect in Gmail, broken in OutlookCause: Outlook uses Microsoft Word's rendering engine, not a browser. CSS like flexbox, grid, and most modern selectors silently fail.
Signature looks perfect in Gmail, broken in Outlook
Cause: Outlook uses Microsoft Word's rendering engine, not a browser. CSS like flexbox, grid, and most modern selectors silently fail.
FixStick to nested HTML tables with inline styles only. Avoid CSS shorthand, padding shorthand, and any custom font that's not web-safe.
02Photo shows a red X in OutlookCause: Outlook blocks images hosted on a server with no public certificate, or any HTTP (not HTTPS) source.
Photo shows a red X in Outlook
Cause: Outlook blocks images hosted on a server with no public certificate, or any HTTP (not HTTPS) source.
FixUse a CDN with HTTPS and a public certificate (Cloudinary, Imgur, your own domain with SSL). Always set explicit width/height in the <img> tag.
03Extra blank space above the signature on mobileCause: Some mail clients wrap long URLs and add a <br> on every line that exceeds their mobile width.
Extra blank space above the signature on mobile
Cause: Some mail clients wrap long URLs and add a <br> on every line that exceeds their mobile width.
FixKeep every line under 60 characters. Use short links (Calendly, your own short domain) instead of full UTM-tagged URLs.
04Signature gets cut off in plain-text repliesCause: Replies in plain-text mode strip all HTML and collapse your formatted signature into one unreadable block.
Signature gets cut off in plain-text replies
Cause: Replies in plain-text mode strip all HTML and collapse your formatted signature into one unreadable block.
FixAlso export a plain-text version. Most tools (including this one) can generate it automatically from your fields.
05Social icons don't show upCause: Some clients block remote images entirely and require a text fallback. Others strip links they classify as tracking.
Social icons don't show up
Cause: Some clients block remote images entirely and require a text fallback. Others strip links they classify as tracking.
FixUse direct image URLs (not redirects), include a small 'Connect with me' text link below the icons, and never rely on icons alone.
06Gmail adds a 'Sent from my iPhone' line above your signatureCause: iOS Mail injects a default signature when sending. Both signatures stack.
Gmail adds a 'Sent from my iPhone' line above your signature
Cause: iOS Mail injects a default signature when sending. Both signatures stack.
FixOpen Settings → Mail → Signature on the iPhone, set it to a single non-breaking space (\u00A0), and let your Gmail/Outlook signature take over.
Install guide
Install in any client in 60 seconds
Click "Copy HTML" in the tool above, then follow the steps for your email client. The full step-by-step for every major client is also in the FAQ section below.
Gmail
Settings → See all settings → General → Signature → Create new → Paste
Outlook (Web)
Settings → Mail → Compose and reply → Paste HTML into editor
Outlook (Desktop)
File → Options → Mail → Signatures → New → Paste
Apple Mail
Mail → Settings → Signatures → + → Paste and Match Style
Yahoo Mail
Settings → More Settings → Mailboxes → Signature → Paste
Thunderbird
Account Settings → Copies & Folders → Signature text → Paste
iOS Mail
Settings → Mail → Signature → set to single space → use desktop for design
Proton Mail
Settings → Appearance → Signature → toggle HTML on → Paste
FAQ
Frequently asked questions
Common questions about installing signatures in different email clients, tracking clicks, and rolling out a unified signature across a team.
01How do I install the signature in Gmail?
Open Gmail → Settings (gear icon) → See all settings → General tab → scroll to Signature → click Create new → paste the copied HTML → set the signature defaults (new emails, replies, forward) → scroll to the bottom and click Save Changes.
02How do I install the signature in Outlook desktop?
Outlook desktop (Windows): File → Options → Mail → Signatures → New → paste the HTML → set as default for new messages and replies. Outlook desktop (macOS): Outlook → Preferences → Signatures → + → paste HTML → drag to set as default. For Outlook web, use the same flow as Gmail under Settings → Mail → Compose and reply.
03How do I install the signature in Apple Mail?
Mail → Settings (or Preferences) → Signatures → select the account on the left → click + → name it, then drag the copied HTML from the browser into the signature body. macOS may paste it as rich text — if the layout breaks, use 'Paste and Match Style' (⌥⇧⌘V) and re-paste the raw HTML.
04Will my images (logo, photo) work in every email client?
Yes, as long as the image is hosted on a public HTTPS URL. Some corporate Outlook tenants block external images by default — recipients will see an empty box until they click 'Download pictures'. To avoid that, embed small inline base64 images (only feasible for icons under 10KB) or accept that some recipients will need to whitelist your host.
05Is there a size limit for an email signature?
There's no universal hard limit, but Google recommends keeping the total signature under 8KB so it doesn't get clipped on mobile or trigger spam filters. As a rule of thumb: one photo under 30KB, a logo under 20KB, and the rest as text. This tool warns you if your signature exceeds the recommended size.
06Can I use different signatures for different email accounts?
Yes — most clients (Gmail, Outlook, Apple Mail) let you assign a different signature per sending address. Create one for personal and one for work using the same template in this tool, then assign each in your client settings.
07How do I track clicks on my signature links (CTA, social)?
Add UTM parameters to the URL: e.g. https://calendly.com/john-acme?utm_source=email&utm_medium=signature&utm_campaign=outreach. Your booking tool or analytics dashboard will then attribute meetings to the signature. For social links, link to a tracking redirect (your own domain or a tool like Short.io).
08What's the difference between HTML and plain-text signatures?
HTML signatures carry inline CSS, tables, and image tags — they look designed. Plain-text signatures are just text. Always keep a plain-text fallback because some recipients (especially in legal, government, or B2B) read email in plain-text mode. The 'Copy plain text' button generates one for you automatically.
09Can my whole team use a unified signature?
Yes, but the free tier of this tool is designed for individuals. For team rollouts with centralized management, branding, and analytics, the enterprise workflow is: (1) export this signature as a template, (2) host it in your email admin console (Google Workspace → Brand Management for Gmail, Microsoft 365 → Disclaimers/Signatures, CodeTwo, Exclaimer, or WiseStamp for managed teams).
10Is this signature generator really free? Will there ever be a paid tier?
Yes, fully free, no signup, no watermark, and no functional limits. The tool runs entirely in your browser — your data never touches our servers, which is why we can't bill you for a 'pro' tier. Future work (more templates, vCard QR codes) is also free.
Pair it with
Tools that match the signature
A signature is one piece of a personal brand. These tools help you carry the same identity through QR codes, invoices, resumes, and slide decks.
Meta Tag Generator
Pair your polished signature with strong email subject-line previews and page meta.
QR Code Generator
Generate a vCard QR code that drops your contact into someone's phone with one scan.
Case Converter
Reformat text strings to title case for titles, names, and credentials.
Image Color Picker
Pull the exact brand hex from your logo so the signature color matches perfectly.
Image Compressor
Compress your headshot or logo to under 30KB before embedding it in the signature.
Code to Image
Capture your polished signature as a PNG for slide decks and Notion docs.
Invoice Generator
Build matching branded invoices that share the same color palette and typography.
Resume Builder
Carry the same identity into a matching resume that downloads as PDF.
100% browser-side, no data leaves your deviceLive Gmail / Outlook / Apple Mail previewAuto plain-text fallback generated