HTML Email Signature Generator
A signature that survives Outlook and blocked images: every style inline, a table for layout, everything important as text, and a plain text version too.
Layout stacked
Lines of text 3
Logo none
Disclaimer none
HTML size 1214 bytes
HTML
<!-- Signature. Every style is inline on purpose: Gmail strips a <style> block and
Outlook strips classes, so anything that depends on a stylesheet is gone. -->
<table role="presentation" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse">
<tr>
<td style="padding:0;vertical-align:top">
<div style="font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;font-size:15px;line-height:1.45;color:#1f2430;font-weight:600">Liton Arefin <span style="font-weight:400;color:#6b7280">(they/them)</span></div>
<div style="font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;font-size:14px;line-height:1.45;color:#4b5563">Founder, BucketWP</div>
<div style="font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;font-size:14px;line-height:1.45;color:#1f2430;padding-top:6px"><a href="mailto:[email protected]" style="color:#1e56ec;text-decoration:none">[email protected]</a><br /><a href="tel:+447700900123" style="color:#1e56ec;text-decoration:none">+44 7700 900123</a><br /><a href="https://swiftplugins.pro" style="color:#1e56ec;text-decoration:none">swiftplugins.pro</a></div>
</td>
</tr>
</table>
Plain text version, for the text part of the message
Liton Arefin (they/them)
Founder, BucketWP
[email protected]
+44 7700 900123
https://swiftplugins.pro
Everything is inline. Gmail strips a <style> block and Outlook strips
classes, so a signature that depends on a stylesheet arrives unstyled.
That is also why the layout is a table: Outlook renders through Word,
which ignores padding on inline elements and does not do flexbox at all.
No logo, which is the safe choice: images are blocked by default in a
lot of clients and on most corporate mail, so a signature whose branding
is an image arrives as nothing. If you add one, keep the name and the
contact details as text.
role="presentation" on the table stops a screen reader announcing "table
with two rows" before your name. It is one attribute and it is the
difference between a signature and a puzzle.
The tel: link uses the digits and the plus only, because a space or a
bracket in a tel: URI is not reliably dialled. What is displayed can
keep its formatting; what is in the href cannot.
Reply chains repeat the signature every time. That is the argument for
the short version: a name, a role, one contact route and a link. A
photo, a logo, five social icons and a quotation become forty lines of
noise three replies into a thread.
A legal disclaimer is a business decision rather than a technical one,
and it has not fared well in court: it is unilateral, unread and
attached after the fact. If your organisation requires one, keep it
short and keep it last.
Send the plain text version too. Most clients build the text part from
the HTML, and the result is usually worse than the one you wrote,
particularly with a table in it.
Output is valid and updates as you type.
Fix the highlighted fields to update the output.
A signature is the hardest small piece of email HTML, because it is pasted into a composer
and then mangled. Outlook strips classes. Gmail strips the <style> block. Every client
re-wraps the markup on reply.
So every style here is inline, the layout is a table, and nothing depends on a stylesheet surviving.
Two other decisions do most of the work. Images are blocked by default in a lot of clients and on most corporate mail, so a signature whose name lives in a logo is a signature with no name: everything important here is text. And the links are absolute https, because a signature travels and has no page to be relative to.
The unfashionable advice: shorter is better. A signature with a photo, a logo, five social icons, a quote and a disclaimer repeats on every reply in the thread.
How to use
- Fill in the name, and as little else as you can stand.
- Pick a layout. Single line is the kindest on a reply chain.
- Add a logo only if it is hosted somewhere permanent.
- Paste the HTML into your client’s signature editor, and the plain text into the plain text signature if it has one.
Example
<table role="presentation" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse">
<tr>
<td style="padding:0;vertical-align:top">
<div style="font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;font-size:15px;line-height:1.45;color:#1f2430;font-weight:600">Liton Arefin <span style="font-weight:400;color:#6b7280">(they/them)</span></div>
<div style="font-family:…;font-size:14px;color:#4b5563">Founder, BucketWP</div>
<div style="font-family:…;padding-top:6px">
<a href="mailto:[email protected]" style="color:#1e56ec;text-decoration:none">[email protected]</a><br />
<a href="tel:+447700900123" style="color:#1e56ec;text-decoration:none">+44 7700 900123</a><br />
<a href="https://swiftplugins.pro" style="color:#1e56ec;text-decoration:none">swiftplugins.pro</a>
</div>
</td>
</tr>
</table>Note the tel: link: +447700900123, with the digits and the plus and nothing else, while
the displayed number keeps its spaces. A bracket or a space inside a tel: URI is not
reliably dialled.
Pitfalls
Inline or it does not exist. Gmail strips <style> blocks in several contexts and
Outlook strips classes, so anything that depends on a stylesheet arrives unstyled. That is
also why the layout is a table: Outlook renders through Word, which ignores padding on
inline elements.
Images are blocked by default. A signature whose name, role or phone number is inside an image arrives blank for a large share of recipients. Keep the text as text and treat the logo as decoration.
Never paste an image from your desktop. It becomes an attachment on every message you send, and recipients see a paperclip on an empty email. Host it and link to it.
role="presentation" on the table. It stops a screen reader announcing “table with two
rows” before your name.
Reply chains repeat it. Three replies in, a long signature is forty lines of noise between two sentences. This is the strongest argument for the short version.
Social icons are usually not worth it. Each one is an image that may be blocked, and a row of coloured squares in a business email dates quickly. A single link to the one profile that matters reads better.
A legal disclaimer is a business decision, not a technical one. It is unilateral, unread, and attached after the fact, and it has not fared well in court. If your organisation requires one, keep it short and keep it last.
Test it by sending it. A preview in the signature editor tells you nothing about Outlook. Send one to yourself, then reply to it, and look at both.
Compatibility
Everything runs in the browser: nothing is uploaded and nothing is stored.
The font stack starts with -apple-system and BlinkMacSystemFont, then Segoe UI, then
Arial. Outlook on Windows will land on Arial, which is the point: a web font in a signature
is a web font that does not load.
role="presentation" and inline styles are understood by every client. border-collapse on
the table is there because Outlook adds cell spacing otherwise, which shows up as a gap
nobody can find in the markup.
The plain text version is worth sending. Most clients build the text part from the HTML by stripping tags, and with a table in the markup the result is worse than the one you wrote.
For pronouns: they are shown beside the name in a lighter weight, which is the convention and costs nothing. Adding them is a decision for the person whose signature it is.
Frequently asked questions
Where do I paste this?
Why does my signature look different in Outlook?
flex and
grid do nothing, and a background image never appears. The table layout here is the
workaround.