Email Signature Design — A Complete Guide
Good design makes your signature memorable without being distracting. Learn the typography, color, and layout principles that top brands follow.
Establish a clear visual hierarchy
Your name should be the largest and boldest element. Job title comes next in a smaller size. Contact details are smallest. This three-tier hierarchy guides the reader's eye naturally from most to least important.
Choose the right typography
Use a web-safe sans-serif font (Arial, Helvetica, Verdana) for maximum compatibility. Set your name at 14–16px bold, title at 12–13px, and details at 11–12px. Never use more than two fonts.
Use color with purpose
Pick one brand color for accents — your name, a divider line, or icon backgrounds. Keep body text dark gray (#333) on white for readability. Avoid bright neon colors and gradients, which render inconsistently in email clients.
Design for a single column on mobile
Over 60% of emails are read on mobile. A single-column, top-to-bottom layout works on every screen size. Side-by-side layouts (photo + text) should stack vertically on narrow screens.
Optimize images for email
Keep total signature size under 50KB. Compress photos to 72dpi, use PNG for logos with transparency, and always set explicit width and height attributes to prevent layout shifts when images load.
Use a separator to create breathing room
A thin horizontal line or vertical bar between your photo and text prevents visual clutter. Use a light gray (#E0E0E0) or your brand color at 1–2px thickness. It's a small detail that elevates the design.
Frequently Asked Questions
What colors work best in email signatures?+
Navy blue (#1a365d), dark teal (#0d9488), and charcoal (#374151) are safe, professional choices. These colors have strong contrast on white backgrounds and look consistent across email clients.
Can I use custom fonts in my email signature?+
Custom web fonts aren't reliably supported in email clients. Outlook ignores them entirely. Stick to web-safe fonts (Arial, Helvetica, Georgia, Verdana) to ensure your design looks consistent everywhere.
How wide should an email signature be?+
Keep it under 600px wide — this is the standard email content width. On mobile, the signature should scale to fit the screen. Our templates are designed at 500px max-width for optimal display.
Should I use a table-based or div-based layout?+
Always use HTML tables for email signatures. Outlook and many email clients don't support modern CSS layout (flexbox, grid). Table-based layouts render consistently across all clients.
How do I make my signature look good in dark mode?+
Use transparent PNGs for logos, avoid pure white (#FFFFFF) backgrounds (use slight off-white or transparent), and ensure your text has enough contrast for both light and dark backgrounds.
What image format should I use for my signature logo?+
PNG is the safest choice — it supports transparency and is universally displayed. Avoid SVG (poor email support) and GIF animations (unprofessional). Keep file sizes under 30KB.
Design your signature now
Pick a template, choose your colors, and get a perfectly coded signature in seconds.
Start Designing