How to Code an HTML Email Signature

You know your HTML and CSS inside out. But can you use all those neat stylesheet tricks in an email signature? (Spoiler alert: You can’t.)
Barbora Růžičková • Web Designer •
Barbora Růžičková • Web Design
💬 Share
✏️ 14. 10. 2024 • Updated 04. 11. 2024
✏️ 14. 10. 2024 • Updated 04. 11. 2024
✏️ 14. 10. 2024
Updated 04. 11. 2024
Barbora Růžičková • Web Designer
branding
business
programming
Email and signature on laptop screen

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 ⬇️

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.

Example of email signature
An example of the email signature of a web developer. Template design by elversa.

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.

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.

Example of email signature
An example of an email signature with a headshot. Template design by Lucie Šindelková.

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.

Example of email signature
Templates and inspiration available in Canva

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.

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:

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.

Screenshot of Jane Doe email signature with name, position, email, phone and website

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!