An email signature that breaks down between Outlook and Gmail, an invisible logo in dark mode, contact details buried in a non-indexable image: most professional signatures accumulate technical flaws that their authors are unaware of. Creating a striking email signature requires mastering the rendering constraints of email clients before even thinking about design.
Email client rendering engine: the technical constraint that dictates everything
Classic Outlook relies on the Microsoft Word rendering engine, not on a browser engine. This detail radically changes the rules of the game. Modern CSS properties (flexbox, grid, max-width in percentage) are ignored or misinterpreted.
Gmail, on the other hand, removes stylesheets embedded in the head. Only inline styles survive. A signature built in a traditional web editor may display correctly in the browser but can completely break upon receipt.
We recommend structuring the signature with HTML tables (yes, like in 2005). A one or two-column table, with fixed-width cells in pixels, remains the only reliable structure across all email clients. This is also the method used when creating an email signature with Web Consult to ensure consistent rendering between Outlook, Gmail, and Apple Mail.
Limiting the total width of the signature to about 600 pixels ensures correct display on mobile without media queries, as most mobile email clients automatically reduce tables to the screen width.
Dark mode and blocked images: two rendering traps to anticipate
Dark mode is not just a simple inversion filter. Each client applies its own logic: some invert text colors but not backgrounds, others partially modify images, and some do nothing at all. A dark logo on a transparent background becomes unreadable in the majority of dark mode configurations of Outlook.com and Gmail.
The workaround is to export the logo with a slightly tinted background (off-white or light gray) instead of transparent. The alternative is to provide a light outline around the logo. Testing the signature in at least three environments (Gmail web, Outlook desktop, Apple Mail) in both light and dark modes before deployment is the only way to verify the actual rendering.
Another common issue: Classic Outlook blocks the downloading of remote images by default. The recipient sees a blank frame with a broken icon until they click “Download images.” If the logo or banner contains contact details, they disappear. That’s why all contact information must remain in HTML text, never embedded in an image.
Accessible email signature: HTML text, contrast, and alt attributes
The accessibility of an email signature is not limited to choosing a readable font. Text embedded in a PNG or JPEG image is not read by screen readers and is not selectable. A visually impaired interlocutor using a screen reader will have no access to anything if the contact details are graphic.
We observe that the best practice remains to keep name, title, phone, and address in plain HTML text. Only the logo and any promotional banner can be images, provided they have a descriptive alt attribute.
For contrast, a minimum ratio of 4.5:1 between text and background is the web accessibility standard. Light gray (#999) on a white background is insufficient for body text, even if the visual effect seems elegant. Prefer a dark gray (#333 or #555) for secondary information (address, legal notice).
- Name, title, and contact details in HTML text, not in image
- Alt attribute filled in for each image (logo, banner, profile photo)
- Text/background contrast greater than 4.5:1 for regular text
- Links with explicit anchor text (“Visit our site” rather than a bare URL)
Composition of a striking email signature: hierarchy and elements to include
A professional signature becomes more effective when it can be read in less than three seconds. Visual hierarchy takes precedence over the amount of information. Three levels are sufficient:
- Level 1 (bold, slightly larger size): first name, last name, and title
- Level 2 (standard size): phone, email, company name
- Level 3 (smaller size, secondary color): postal address, social media links, any legal notice
Limiting the signature to six or seven lines of text avoids the block effect that drowns out the information. Each added line dilutes the readability of the whole.
Social media icons are useful as long as they link to active profiles. A link to a LinkedIn account inactive for two years sends a negative signal. We recommend keeping only the channels that are actively maintained.
The profile photo remains optional. It adds weight to the signature (in kilobytes and visual clutter). On mobile, a poorly sized photo can push the text off-screen. If used, a dimension of 80 x 80 pixels in square format offers a good compromise between readability and lightness.
The promotional banner at the bottom of the signature turns every sent email into a micro-advertising space. To remain effective, only one message per banner, one clickable link, and a visual that remains understandable even if images are blocked (thanks to the alt text).
Last often overlooked point: consistency within a team. When each collaborator uses their own layout, the company image becomes fragmented. Standardizing the HTML template and allowing only personal fields (name, position, phone) to be modified ensures a cohesive visual identity across all outgoing emails.
