Email Signature Design
Email signature design is constrained by rendering engines, not just aesthetics. Outlook uses the Word HTML engine, which rejects CSS flexbox and grid. Gmail strips <style> blocks. Every design decision — layout, typography, image handling — must account for these constraints or the signature will break in the clients your recipients actually use. This guide covers technical requirements alongside design principles.
Design Your Signature Here
SignForge outputs table-based HTML with inline CSS — renders correctly in Outlook and Gmail. Free, no signup.
Create My Signature →Works with Gmail, Outlook, Apple Mail & more
Layout: Table-Based, Max 600px
Email signature layout is built with HTML tables, not modern CSS layout. This is a hard technical requirement, not a stylistic choice. Outlook (2016 through 365) uses the Microsoft Word rendering engine, which does not process display:flex, display:grid, or float-based layouts.
Maximum width: 600px
The narrowest common email preview pane is approximately 600px. At 600px, the signature fits without horizontal scrolling on desktop. On mobile (320–414px viewport), a 600px table will scale down in most clients — but a single-column layout at 480px or less is safer for mobile-first recipients.
Two-column layout (standard)
Left column: logo or headshot (80–200px wide). Right column: name, title, company, contact details. Achieved with a two-cell <tr>. Add valign="top" and vertical-align:top to both cells to prevent content centering.
Single-column layout (mobile-safe)
All content stacked vertically. Simpler to build, zero risk of columns collapsing on mobile. Works better for recipients who open email primarily on phones. The trade-off: logo appears above the name rather than beside it.
Table attributes required
Every table needs border="0" cellpadding="0" cellspacing="0" to remove default browser spacing. Without these, different email clients add different amounts of cell spacing, causing inconsistent layout.
Color Guidelines
All color must be applied as inline CSS properties. No CSS variables, no class-based theming. Define every color value directly on the element that needs it.
Text colors
Name: #1a1a1a or #000000 (near-black, high contrast). Title: #333333 or #444444. Secondary text (phone, website): #555555 or #666666. Never use rgba() or CSS variables — not all email clients support them. Always use hex values.
Brand accent color
Use one brand color, applied to the name, a left border, or a divider line. A 2–3px solid left border on the contact column is an effective way to add brand color without overdesigning. Example: style="border-left:3px solid #2563EB;padding-left:12px;"
Background colors
Keep the signature background white or transparent. Dark backgrounds on signature blocks create visual noise in threaded emails and can make the signature appear as an image rather than text to spam filters. If using a background color, apply it to the table cell, not the table itself.
Contrast requirements
WCAG AA requires 4.5:1 contrast ratio for normal text and 3:1 for large text (18px+ or 14px bold). Use a contrast checker before finalising colors. Light grey text on white (#aaaaaa on #ffffff) fails WCAG AA at 2.32:1 — a common signature mistake.
Link colors
Email clients apply blue underlines to links by default. To override: style="color:#2563EB;text-decoration:none;" on each <a> tag. If you want no underline, set text-decoration:none. Some email clients override link color regardless — test in Outlook before removing underlines.
Typography
Custom fonts (Google Fonts, Adobe Fonts, brand fonts loaded via @font-face) do not load in email clients. Outlook ignores @font-face entirely. Gmail strips the <link> tags that load Google Fonts. Use web-safe system fonts only.
Arial, Helvetica, sans-serifDefault recommendation. Neutral, clean, available on every OS. Best for corporate, tech, and general professional use.
Verdana, Geneva, sans-serifWide letterforms, high legibility at small sizes. Appears slightly larger than Arial at the same pixel value. Good for contact detail rows at 12px.
Georgia, Times New Roman, serifSerif option for legal, financial, and academic contexts. Classic and formal. Readable at 13px and above.
| Element | Size | Weight |
|---|---|---|
| Full name | 16–18px | 700 |
| Job title | 13–14px | 400 |
| Company | 13–14px | 500 |
| Phone / email / site | 12–13px | 400 |
| Legal disclaimer | 10–11px | 400 |
Element Hierarchy: What to Include
The functional purpose of an email signature is to give recipients the information they need to contact you through a different channel. Include elements in this priority order:
Required
Recommended
Avoid
Design Styles
Minimal
Name, title, company, phone — plain text, no images. Often just 4 lines. No logo. One font, two weights (bold name, regular details).
Classic (Two-Column)
Logo or headshot left, contact details right. One brand accent color. 2–4 social icon links below. 540px wide.
Bold / Brand-Forward
Full-width logo row at top, brand background color on the header cell, name in brand font size (18–20px), stronger use of brand palette.
Photo + Details
Headshot (80–100px circular or square) left column, name + title prominently right. Creates personal connection.
Common Design Mistakes
Signature wider than 600px
Set a max-width:600px on the outer table. On mobile email clients, tables wider than the viewport cause horizontal scrolling — recipients swipe to read your signature, which they won't.
Image-only signature
A signature built as a single large image has no selectable text, no clickable links, and renders as a broken image if the host goes down. Screen readers cannot parse it. Always use HTML text with images as supplementary elements.
Phantom gap below images
Inline images have a 4px default space below them in HTML rendering (the descender space for text). Fix: style="display:block;" on every <img> tag. This collapses the gap.
No margin:0 on paragraphs
Email clients apply different default margins to <p> elements. Without margin:0, Outlook adds 16px above and below each paragraph. Always write: <p style="margin:0;"> on every text block.
Too many elements
A signature with 12 contact points, 8 social icons, a banner, and a legal disclaimer is not comprehensive — it's unreadable. Limit to 5–7 elements total. Recipients scan, they don't read signatures.
Low-contrast secondary text
Light grey contact text (#aaaaaa or lighter) on white background fails WCAG contrast. It's also the first thing to disappear when printed. Use #555555 as the minimum for secondary text.
Testing Your Signature Design
Appearance in a browser preview does not reflect how the signature renders in email clients. Test in the actual clients your recipients use.
Outlook desktop (Windows)
The strictest renderer. If it works in Outlook, it works everywhere. Create a free Outlook.com account and send yourself a test. Open in the Outlook desktop app, not in a browser.
Gmail
Send to a Gmail address and view in Gmail web. Check that images load, links are clickable, and no extra blank lines appear above or below the signature.
Apple Mail
Forward the test email to an iCloud address and open in Apple Mail. Apple Mail supports more CSS than Outlook but can still add unexpected spacing.
Mobile (iOS Gmail / Outlook app)
Signatures wider than the mobile viewport cause horizontal scrolling. Check on a real device, not just a responsive browser view.
Frequently Asked Questions
Can I use CSS flexbox in an email signature?
No. Outlook's Word rendering engine ignores display:flex entirely. Columns built with flexbox collapse to a single vertical stack in Outlook. Use HTML tables for all multi-column layouts.
How do I add a vertical divider line between columns?
Use a table cell with a right border: style="border-right:1px solid #e2e8f0;padding-right:16px;". Do not use CSS pseudo-elements (::before / ::after) — they are not supported in email clients.
Can I use border-radius for rounded elements?
border-radius is supported in Gmail and Apple Mail but not in Outlook. A headshot with border-radius:50% will appear circular in Gmail but square in Outlook. For cross-client circular images, use a circular PNG (pre-cropped) rather than CSS.
What is the ideal signature length?
5–7 lines of visible content. The signature should be scannable in under 3 seconds. Long signatures push email content up in preview panes and train recipients to ignore them.
Should I use a horizontal or vertical layout?
Horizontal (two-column: logo left, details right) works well for desktop and wider preview panes. Single-column stacked works better on mobile. For a mobile-first audience, use single-column. For corporate recipients who read email on desktop, two-column is the standard.
Related Guides
Build a Correctly Designed Email Signature
SignForge generates table-based HTML with inline CSS — the format that renders in every email client.
Create My Signature →Works with Gmail, Outlook, Apple Mail & more