KoltrixHTML email signatures that work: size, images and accessibility
A fancy signature can break in Outlook, bloat every reply and confuse screen readers. How to build a light one that survives real email clients.
On this page(10 sections)
An email signature is the one block of design that goes into every message you send. Done well, it tells people who you are and how to reach you. Done badly, it turns into a pile of broken images, a stack of attachments named image001.png and a block of text that a screen reader recites for half a minute.
This guide is about the engineering side: how to build an HTML signature that is small, readable and robust in the clients your recipients actually use. For the agreement on what a team puts in its signatures and how they sound, read signatures and tone for shared mailboxes.
What a signature is for
Keep the purpose narrow. A signature should answer three questions quickly:
- Who is this? Name, role and company.
- How do I reach them? One or two ways: a phone number, a website, maybe a scheduling link.
- Is it legitimate? A consistent, plain block that looks the same every time reads as trustworthy. Fancy changes look like phishing.
Anything beyond that, such as quotes, awards, banner ads and long legal text, competes with the message.
Start with plain text
Build the plain-text version first. Many clients show it, some recipients prefer it and a plain signature is the fallback when HTML is blocked.
Sam Rivera
Support Lead, Acme
[email protected] | +1 555 0100
https://acme.exampleFour lines, no tricks. If the HTML version cannot add real value on top of this, keep the plain one.
HTML rules that keep it alive
Email clients render HTML far less consistently than browsers, and Outlook for Windows uses a different engine from most others. The constraints are covered in HTML rendering constraints for transactional email. For a signature, the practical rules are:
- Use simple tables for layout. Nested tables and inline styles work almost everywhere. Avoid modern layout features such as flexbox and grid.
- Put styles inline. Many clients strip or ignore style blocks.
- Use web-safe fonts with a fallback list, such as Arial, Helvetica, sans-serif. Custom fonts rarely load.
- Set explicit widths and heights on images so layout does not jump.
- Keep the whole thing narrow, about 500 pixels at most, so it fits on phones.
- Avoid scripts, forms and video. They are removed or blocked.
A small example:
<table cellpadding="0" cellspacing="0" role="presentation"
style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #222;">
<tr>
<td style="padding-right: 12px;">
<img src="https://acme.example/img/sam-80.png" width="64" height="64"
alt="Sam Rivera" style="display:block; border-radius:32px;">
</td>
<td>
<strong>Sam Rivera</strong><br>
Support Lead, Acme<br>
<a href="tel:+15550100" style="color:#1a4fd6;">+1 555 0100</a> ·
<a href="https://acme.example" style="color:#1a4fd6;">acme.example</a>
</td>
</tr>
</table>Images: fewer, smaller, hosted
Images cause most signature problems.
- Do not embed images as inline attachments. They show up as stray attachments on every reply, and some clients drop them. Host them on a reliable HTTPS address and link to them.
- Keep files tiny. Aim for under 10 KB each. A 400 KB logo repeated through a long thread is wasteful.
- Provide twice the pixel size for sharp display on high-density screens, and set the displayed size with width and height.
- Expect images to be blocked. Many clients hide remote images until the reader allows them. Everything essential, including your name and phone number, must be text.
- Write alt text. It shows when the image is blocked and is read aloud by screen readers. For a logo, "Acme" is enough. For a purely decorative image, use an empty alt.
- Do not use an image of text. It is not searchable, not copyable and not readable when blocked.
- Mind the host. If you move the image, every old email loses it. Keep the file at a stable address.
Accessibility
A signature is read by many different people and tools.
- Contrast. Use text colours with at least 4.5:1 contrast against the background. Light grey on white looks tidy and is hard to read.
- Size. Keep text at 12 pixels or more, preferably 13 to 14.
- Links. Use meaningful link text, such as "acme.example", not "click here". Keep them underlined or clearly coloured.
- Order. Name first, then role, then contact details. Screen readers read in source order.
- Do not rely on icons alone. A row of unlabeled social icons is noise to a screen reader. If you include them, add alt text and keep the number small.
- Role presentation on layout tables. It tells assistive tools the table is only for layout.
Dark mode
Many clients invert or adjust colours in dark mode, sometimes only partly.
- A transparent PNG logo with dark text can disappear on a dark background. Test it, or use a version that works on both.
- Avoid pure white boxes and hard-coded background colours in the signature.
- Check the result in a real dark-mode client, not only in your editor.
Size and thread bloat
A signature is added to every message, including each reply in a long thread. Heavy markup adds up.
- Keep the HTML under a few kilobytes.
- Remove the large banner or promotional image from replies. Use the full version for first messages only if you must.
- Avoid pasting signatures from a word processor. They carry hundreds of lines of hidden formatting.
Test before you roll out
- Send test emails to Gmail, Outlook (desktop and web), Apple Mail and a phone.
- View them with images blocked.
- Check them in dark mode.
- Send to a screen-reader user, or run a screen reader yourself, and listen to it once.
- Click every link.
Fix the worst client first. A signature that is plain and correct everywhere beats one that is beautiful in two clients and broken in the rest.
For teams
Keep one approved template and a short guide for filling it in. A shared mailbox may need a team signature. See signatures and tone for shared mailboxes, and add the signature setup to your new hire email checklist. Remember the footer rules for marketing messages from email footer basics.
Key takeaways
- A signature should identify you, give one or two ways to reach you and look the same every time.
- Build plain text first, then simple table-based HTML with inline styles.
- Host images, keep them tiny, give them alt text and make sure nothing essential depends on them.
- Check contrast, size, link text and dark mode.
- Test in real clients with images blocked.
Start with Koltrix
Your domain, one inbox, and an API that sends.
A team inbox where AI sorts and drafts (nothing is sent without your click), plus the transactional API and SMTP relay your product sends with. 7 days free, no card.
