Great email signature design is a balance between aesthetics and constraints. You want a signature that reflects your brand, looks polished, and creates a clear visual hierarchy -- but it also needs to render correctly in Gmail, Outlook, Apple Mail, and dozens of other clients that each interpret HTML differently. This guide covers layout patterns, color strategy, typography, image guidelines, and the technical realities of HTML email.
Four common layouts, each with distinct strengths. Choose based on your role, brand, and how much content you need to include.
Name, title, and contact details stacked top to bottom. The most common and reliable layout.
Pros
Cons
Best for: Universal. Safe for any industry and role.
A headshot or logo on the left, text details on the right, separated by a vertical divider.
Pros
Cons
Best for: Sales, real estate, consulting, and client-facing roles.
Logo and name in one column, contact details and social links in another. No photo.
Pros
Cons
Best for: Corporate, enterprise, and agency environments.
Minimal layout with name, title, and contact on one or two lines. No images.
Pros
Cons
Best for: Developers, internal communications, executives who prefer brevity.
Use two to three colors maximum. Each color should have a clear role in the visual hierarchy.
Your main brand color. Use it sparingly on the most important elements to draw the eye. Ensure it has sufficient contrast against white backgrounds (WCAG AA: 4.5:1 ratio for text).
A dark, neutral color close to black (#1a1a1a or #333333). Pure black (#000000) can feel harsh -- softening it slightly improves readability without sacrificing contrast.
A light gray (#e5e5e5 or #d1d5db) creates structure without competing with content. Use it for lines that separate sections or columns.
If you use a colored background (for a banner, for example), keep it light and subtle. Dark backgrounds with white text can look aggressive and may render differently across clients.
Email signatures are limited to email-safe fonts -- typefaces that are pre-installed on all major operating systems. Custom fonts, Google Fonts, and web fonts will not load in Gmail or Outlook, silently falling back to the client’s default.
Create visual hierarchy through size and weight rather than multiple font families. A recommended approach:
Font stack tip: Always declare a fallback stack: font-family: Arial, Helvetica, sans-serif. This ensures graceful degradation when the primary font is not available. Read our complete email font guide for details.
Images in email signatures must be hosted externally on HTTPS URLs. Email clients download the image from that URL each time the email is opened -- they do not embed the file.
Logo sizing
100-250px wide, height proportional. Small enough not to dominate the signature, large enough to be recognizable.
Photo sizing
80x80px for headshots. Square crop with optional border-radius for a circular look (note: appears square in Outlook).
File format
PNG for logos (supports transparency). JPEG for photos (smaller file size). Avoid SVG for maximum compatibility.
File size
Under 200KB per image. Under 50KB is ideal. Larger images may be blocked or slow to load on mobile.
Alt text
Always include descriptive alt text. Many email clients block images by default -- alt text ensures your company name is visible.
Banner images
Under 480px wide, 60-80px tall, under 100KB. Link the banner to a landing page. Update it regularly to keep content fresh.
If you are used to building websites with <div>, flexbox, and CSS grid, email HTML will feel like a different language. That is because it essentially is. Email clients -- especially Outlook desktop, which uses the Microsoft Word rendering engine -- do not support modern CSS layout.
The only layout method that works consistently across all email clients is <table> with <tr> and <td> elements. Every style must be applied inline (directly on the element) because Gmail strips <style> tags.
This is exactly how BrandFooter generates signatures: table-based HTML with inline styles, tested across Gmail, Outlook, Apple Mail, and Thunderbird. You get a design that looks great without needing to write a single line of HTML yourself.
What does not work in email HTML:
Never deploy a signature without testing it first. Send a test email to yourself and check it on every device you have access to. For comprehensive testing, use a tool like Litmus or Email on Acid.
Minimum testing checklist:
Common questions about email signature design.
The vertical (stacked) layout is the safest and most widely used. It works reliably across all email clients, renders well on mobile, and is the easiest to build with table-based HTML. Horizontal layouts with a photo work well for client-facing roles but require more careful testing in Outlook.
Two to three colors maximum. Use your primary brand color for your name and links, a neutral dark color (near-black) for body text, and optionally a muted color for borders or dividers. More than three colors creates visual noise and makes the signature look unprofessional.
Border-radius works in Gmail, Apple Mail, and most web-based clients. However, Outlook desktop (which uses the Word rendering engine) does not support it. Your rounded corners will appear as sharp corners in Outlook. If pixel-perfect rendering in Outlook matters, use VML markup or accept square corners as a graceful fallback.
Email clients do not reliably support modern CSS layout methods like flexbox, grid, or even basic div positioning. Tables, on the other hand, have been supported since the earliest HTML email clients and remain the only layout method that works consistently everywhere. Think of table-based email HTML as a separate discipline from web development.
Start by sending yourself a test email and checking it on your own devices. For broader testing, use tools like Litmus or Email on Acid to preview your signature in dozens of clients simultaneously. At minimum, test in Gmail (web), Outlook desktop, Outlook web, Apple Mail, and one mobile client. BrandFooter signatures are pre-tested for compatibility.
Traditional responsive design (media queries) does not work in most email clients because they strip <style> tags. Instead, design your signature to be narrow enough (under 600px) to work on both desktop and mobile without needing to reflow. Use percentage-based widths where possible, and test on actual mobile devices to ensure readability.
Skip the HTML and CSS headaches. Our free generator creates professionally designed signatures with table-based HTML and inline styles. Choose a layout, customize your colors and fonts, and copy the HTML in seconds.