Email Signature Design: Examples and How-To
Strong email signature design is the digital extension of your stationery: the same logo, type, and contact details that appear on your business card, now landing in every inbox you write to. The catch is that email clients render HTML inconsistently, so a signature has to be both on-brand and bulletproof. This guide shows what to include, real layout examples, sizing rules, and a step-by-step process for building one that holds up everywhere.
Your signature should match the rest of your identity. For the full system it belongs to, see our complete stationery design guide, and align it with your letterhead design so printed and digital correspondence look the same.
What to Include in an Email Signature
Keep it to what a recipient actually needs. A clean signature beats a cluttered one every time.
- Name and title — the essentials, name slightly larger or bolder.
- Company name and logo — small, optimized logo image.
- Phone and website — one or two contact methods, not five.
- One call to action — optional: a booking link, latest offer, or social row.
- Legal line — only if your industry requires a disclaimer.
Leave out the email address (it is already in the From field), motivational quotes, and large banner images that trigger spam filters.
Layout Examples
Three reliable structures, in rough order of complexity:
- Single-column (simplest): name, title, company, phone, website stacked left-aligned. Renders perfectly everywhere, including plain-text fallbacks.
- Logo-left, details-right: a two-cell table with a small logo on the left and stacked details on the right, separated by a thin vertical brand-color rule.
- Banner-bottom: the logo-left layout plus a slim promotional banner or social-icon row beneath. Use sparingly — banners are the most likely element to break or get blocked.
Sizing and Technical Rules
Email is not print. Design for screens and for clients that strip styling.
| Element | Recommendation |
|---|---|
| Overall width | 320–600 px max (mobile-safe) |
| Logo image | ~100–150 px wide, served at 2× for retina |
| Font size | 12–14 px body, 16 px name |
| Color mode | RGB / hex (not CMYK) |
| Typeface | Web-safe stack (Arial, Helvetica, Georgia) |
| Image hosting | Absolute URL on a reliable host |
- Use HTML tables for layout, not CSS flex or grid — many clients (notably Outlook) ignore modern CSS.
- Use web-safe fonts; custom fonts rarely load in email, so set a sensible fallback stack.
- Host the logo at an absolute URL and add descriptive alt text, since many clients block images by default.
- Keep total image weight small so the signature loads fast and doesn’t trip spam filters.
Step-by-Step: Building Your Signature
- Match your brand. Pull the logo, brand colors (as hex), and contact details from your existing stationery.
- Choose a layout. Start with single-column or logo-left; add a banner only if needed.
- Build it in an HTML table. Use inline styles, fixed widths, and a web-safe font stack.
- Optimize and host the logo. Export at 2×, compress it, and host it at a stable absolute URL with alt text.
- Add links. Make the website, phone (tel: link), and any CTA clickable with descriptive anchors.
- Test across clients. Send to Gmail, Outlook, and Apple Mail on desktop and mobile before rolling out.
- Paste into settings. Add the finished signature in your email client’s signature settings.
Mobile Rendering and Dark Mode
More than half of email is now opened on a phone, so the signature has to hold up on a narrow screen. Keep the overall width at or below 600 px and avoid fixed multi-column layouts that force horizontal scrolling on mobile. A single-column or compact logo-left layout adapts far better than a wide banner. Tap targets — phone numbers and links — should be large enough to tap accurately with a thumb.
Dark mode is the newer trap. Many clients invert or recolor backgrounds, which can turn a logo on a transparent background into an unreadable smudge or surround it with an ugly box. Use a logo that reads on both light and dark backgrounds (a version with a subtle outline or sufficient internal contrast), and avoid relying on a white background behind dark text. Test the signature in both light and dark mode before rolling it out.
Standardizing Signatures Across a Team
For a company, consistency matters more than individual flair. A signature where every employee formats their own version undermines the brand the same way three different phone-number formats would on printed stationery. Build one master template, lock the structure (logo, layout, fonts, colors, spacing), and let individuals fill only their name, title, and direct contact details.
Larger organizations often manage this centrally through their email platform or a dedicated signature-management tool, which pushes a single approved template to every mailbox and updates it in one place. However you distribute it, document the rules — logo file, hex colors, font stack, link format — exactly as you would for the rest of the brand system.
Common Email Signature Mistakes
- Using images for text. Text baked into an image disappears when images are blocked and cannot be selected or clicked.
- Modern CSS layouts. Flexbox and grid break in Outlook; use HTML tables with inline styles.
- Huge logos or banners. They slow loading, trip spam filters, and dominate short replies.
- No alt text or broken image URLs. Blocked or missing images leave gaps; always add alt text and host on a stable URL.
- Including the email address. It is already in the From field; the repetition just adds clutter.
Tools and Generators
You do not have to hand-code one. An email signature generator like HubSpot’s free signature maker, Canva’s signature templates, or your email provider’s built-in editor will output tested HTML. Design teams often build a master template in a generator, then standardize it across staff so every signature is consistent. If you do hand-code, keep the HTML simple and table-based, and always test before deploying. Use the same logo treatment and contact block as your postcards and other collateral so the brand stays unified across print and inbox.
Frequently Asked Questions
What should a professional email signature include?
Include your name, title, company name, logo, and one or two contact methods such as phone and website. Optionally add a single call to action or social row, and a legal disclaimer if your industry requires one. Leave out your email address, quotes, and large banner images that crowd the signature or trigger spam filters.
Why do email signatures break in some inboxes?
Email clients render HTML inconsistently. Outlook in particular ignores modern CSS like flexbox and grid, so signatures built with them collapse. Use HTML tables with inline styles, fixed pixel widths, and web-safe fonts, and host images at absolute URLs with alt text since many clients block images by default. Always test before deploying.
What size should an email signature be?
Keep the overall width to 320–600 px so it stays mobile-friendly, with a logo around 100–150 px wide served at 2× for retina screens. Use 12–14 px body text and 16 px for the name. Design in RGB hex colors, not CMYK, since signatures are viewed on screens, never printed.
Should I use an email signature generator or hand-code it?
A generator like HubSpot’s free tool, Canva, or your email provider’s built-in editor outputs tested, cross-client HTML and is the safest choice for most people. Hand-coding gives full control but requires table-based markup and thorough testing across Gmail, Outlook, and Apple Mail on both desktop and mobile.
