A few months ago, after a successful website handover, a client asked me if I could design and code a custom email signature for them. Well, of course I could! But since it had been a few years since I last worked on this sort of mini project, I decided I’d better brush up on the dos and don’ts of HTML email signature coding.
If you’re a web developer faced with the same task (or a brave web enthusiast set on creating their own beautiful custom email signature), read on.
⬇️ Jump straight to the code ⬇️
Table of Contents
What Is an HTML Email Signature?
An HTML email signature is a customizable block of text, images, and links that appears at the bottom of your emails. A digital business card of sorts.
Most email clients (the software you use to manage your emails) come with the option to create your own plain-text signature. That’s generally simple text with no formatting, and if you’re fine with that, great. Plain-text signatures will display correctly across most, if not all, email clients and platforms. Their only drawback is that they’re, well, rather plain (i.e., not visually attractive).
But I want a pretty signature, I hear you say. Of course! You could also add an image-only signature to your emails; basically a single picture that contains all your signature information. It will look very polished. BUT – you can’t copy the text in the image, which will frustrate anyone trying to get in touch with you in one click. Also, some email clients might block images by default, which means that your signature might end up not being visible at all.
Coded HTML signatures offer the best of both worlds. They allow for some visual expression while letting people actually use your contact details. You certainly don’t need one. But it’s one more tiny thing that adds to the overall image of your brand.

What Should an HTML Email Signature Include?
Let’s dive into email signature design! Information and user experience always comes first: which elements should a signature definitely include?
Contact Details
The reason for the existence of an email signature, I’d say.
At the very least, include your name, job title, company name and some contact details. This could be an email, a phone number, a website address, or even a physical address, if that’s relevant to your (or your client’s) business.
Logo or Headshot
I’m guessing that one of the reasons you want to use an HTML signature is to include some images. This could be a company logo, a headshot, or perhaps a stylized handwritten signature.
Feel free to use high-resolution images. If you are creating an email signature for several people within one business, make sure the signature layout stays the same (and that everyone uses the same version of the company logo). Also, for security reasons, never use a photo of your actual handwritten signature in your email signature (or anywhere else, for that matter…). There are plenty of script fonts to choose from.
Links and Social Media
You can also include social media icons, a direct link to a booking calendar, or a call to action leading to a specific landing page.
Disclaimer
In some industries, you may be required to add a disclaimer to your company emails. Make sure to check with the person responsible for the legal aspects of your business.

HTML Email Signature Design Recommendations
Now that we know what information we need in our email signature, we can move to the design part! The key takeaway is to keep the signature minimalist and professional. After all, you don’t want it to take attention away from the actual content of your email! The best signatures are simple and unobtrusive.
Design Inspration and Email Signature Generators
You’ll find loads of templates and design ideas on websites such as Canva or Pinterest, or you can use a free online email signature generator. I would only recommend using them to create a design, though, and coding the signature manually. The code some of these generators produce might not meet all the recommended best practices, which, in turn, might make the signature incompatible with some email clients.
Keep the width below 600px
Keeping the signature 600px (or less) wide will ensure it is legible on most devices. Check to see how it displays on mobile. If you want to stay super-safe, aim for a width of 300–400px, which covers most phones. In my website design work, for example, the smallest width I generally check for is 320px.
Use Web-safe Fonts
Stick to web-safe fonts – you know, Arial, Times New Roman, and the like. I know, I know… They’re boring and so 1990. But you can’t attach a font file to your email signature. When it comes to fonts, you’re completely reliant on the typefaces included in email clients. Don’t risk your signature looking weirdly lopsided because you used your brand’s custom-designed font.
If you really need your beloved custom font in your signature, use an image for your brand name (or some other part of your email signature that people won’t want to click on).
Finally, don’t go overboard on font sizes. The default font size in many email clients is around 10px. Test your signature design to see if the fonts aren’t too big.
Optimize the Signature for Dark Mode
Many people (myself included) use their email clients in dark mode. When designing your email signature, think about how it will look on a white and a black background – and make sure it’s legible in both cases.

Best Practices for Coding an HTML Signature in 2024
And now, let’s get to the code itself! When I started researching best practices for coding HTML signatures, I sort of hoped that email clients in 2024 might be able to process standard CSS elements (divs, anyone?). Unfortunately, nothing much has changed on that front. So, without further ado, here comes a list of things to keep in mind when coding an HTML signature from scratch.
Use Tables
Forget responsivity and fluid design. Forget divs, spans, flexbox, and everything else you rely on in your everyday coding shenanigans.
Use tables. Assign them specific heights and widths and set the cellpadding and cellspacing elements to 0. This will stop the various parts of the signature from moving around when opened in different email clients and on various devices. Some email clients have issues with CSS elements; others apply their default padding to table cells. So, to play it safe…
Just. Use. Tables.
Assign Height and Width to Elements
Assigning specific heights and widths to elements in an HTML email signature ensures that your design looks, once again, consistent across different email clients and devices. It helps prevent layout issues, such as images appearing too large or too small.
<table cellspacing="0" cellpadding="0" height="150" width="350">
<tbody><tr><td></td></tr></tbody>
</table>
Do Not Use Shortened Links
You know, ones like bit.ly/xyz or tinyurl.com/xyz. Spam filters can’t follow these, so they may mark them as spam and send your email straight to the recipient’s Junk folder.
If you are linking to external images, host them on your own website.
Enforce Design Best Practices
As mentioned above in the section on designing HTML email signatures, you want to keep your signature (i.e., your table) 600px wide or less, just to make sure it doesn’t behave weirdly on smaller devices. To be truly mobile-friendly, aim for a width of 300–400px.
The second design best practice you can enforce in your code is using web-safe fonts. If the design uses a less common font, at least set up a web-safe font as a fallback option.
Use Inline CSS and HTML Attributes
You can’t attach an external stylesheet to an email signature. Add all your CSS inline, like so, and try to keep it basic:
<table
cellspacing="0"
cellpadding="0"
height="150"
width="350"
style="background-color: #ffffff;">
<tbody><tr><td></td></tr></tbody>
</table>
Also, do not shy away from using old HTML attributes you haven’t seen for ages (valign!). Though obsolete in modern web design, older email clients may still recognize them… unlike the fancy CSS in your code.
Free HTML Signature Template Code
Feel free to grab this super basic email signature template and edit it as you see fit :). Right-click, download and open in a plain text editor.

Adding HTML Signatures to Your Emails
Congratulations! You’ve successfully designed and coded a custom email signature. Now, how exactly do you get it inside your emails?
This will vary greatly depending on your – or your customer’s – email client and the devices they use (pray it’s not Apple Mail on an iPad. I love Apple dearly, but getting a custom signature into an iPad hurt). Specific tutorials are outside the scope of this article, but feel free to check out the following links for the most common cases – Outlook, Gmail and Apple Mail.
I hope this short and sweet guide has helped demystify the process of creating and implementing HTML email signatures. Happy coding, and may your signatures always look stylish and sharp… on as many devices as possible!
Sources
- CodeTwo Knowledge Base: Good practices for preparing an email signature
- MailSignatures: Email Signatures vs. SPAM
- Exclaimer: The 17 DOs and DON’Ts of email signatures
- Amy Elliot: Your guide to email signature best practices (with examples)
- ByBrand: Complete guide to HTML email signatures