It’s been nearly 18 years, and programming email newsletters and email signatures has still not progressed as quickly as the rest of the web. It’s definitely trying, though!
I remember my early days in 2004 / 2005 when I first started learning HTML. “HTML4” was very limited compared to what it has become today (HTML5). HTML4 was limited with screen sizes, graphics, effects, fonts, etc. You just had to make due with the limitations, and look for ways to push those limits to something more impressive. Still, many people made some amazing websites.
Thankfully, the web today has come lightyears ahead of where it was in 2004!
Recently, I’ve been reconsidering how I both design and program email signatures. Unfortunately, so many people overlook how important their email signatures are in general, not realizing how useful they can be.
Not only do email signatures provide contact information for the sender, but a well-designed email signature also enhances your brand, shows professionalism, and shows that you’re attentive to details.
In reconsidering how I both design and program email signatures, I was most concerned about typography. I’ve been using webfonts in email signatures with some success. However, I had to ask “Do webfonts show up for everyone?”
First of all, what is a webfont?
Webfonts are fonts from Google Fonts or Fontsquirrel (or elsewhere) that can be specifically chosen, embedded in a page’s code, and displayed on a web page (e.g. headings, paragraphs, buttons, etc.). Just like my site… Currently, it’s primarily using DM Sans from Google Fonts.
A Little (More) History
Back in the “old days” of the web, no one could use webfonts. Webfonts weren’t invented yet. ☹️ We all had to use what was called “web safe fonts”. Fonts that came preinstalled with Windows and Macintosh computers, so that when a font was declared, that font’s style would (most) certainly display.
Unfortunately, fonts that both major operating systems shared were very few. There were about 15 choices. Verdana and Arial were my faves (at that time). Here’s a fun little graphic I made to list the font style choices available at that time.
So what does this have to do with email signatures?
Consider the list below. Webfonts are not widely supported by most email clients. Yes, there are many people on iOS and macOS devices, but you’re not reaching the majority of users on all the major email clients by relying solely on webfonts.
| Email Client | Webfont Support |
| Apple Mail | ✓ Yes |
| Outlook 2007-2016 | ✘ No |
| Outlook 2019 | ✘ No |
| Outlook for Mac | ✓ Yes |
| Outlook Office 365 | ✘ No |
| Gmail App | ✘ No |
| iOS | ✓ Yes |
| Outlook App | ✘ No |
| Samsung Mail | ✘ No |
| AOL Mail | ✘ No |
| Gmail | ✘ No |
| Office 365 | ✘ No |
| Outlook.com | ✘ No |
| Yahoo! Mail | ✘ No |
Solution?
Use both.
What?
Yeah, use both a webfont and a web safe font!
How do you do that?
Glad you asked.
In the code, declare a webfont as the primary font, and your “favorite” close-second web safe font next.
Because we’re working with an email signature, you’ll want to not only use tables (because email standards are still in the dark ages), but also inline the CSS styles (because email standards are still in the dark ages).
<table>
<tr>
<td style="font-family: 'DM Sans', Helvetica, Arial, Verdana, sans-serif;">
Styled Text
</td>
</tr>
</table>If the email client doesn’t support webfonts (in this case DM Sans), it will look for the next declared font (in this case a web safe font called Helvetica) in the list. If it can’t find that font, it will look for the next declared font (Arial), and so on…
Basically, a designer / programmer should design 2 versions of the email signature: 1) using a webfont and 2) using a web safe font. This way, you can be aware of what the fonts will look like in both situations.
However, before the webfont will show up, you need to embed the webfont. With this piece of code, you’ll want to call / embed the webfont in the HTML of the signature. There are 3 methods in which to do so:
- <link>
- @import
- @font-face
The @font-face method tends to lead to fewer display / rendering issues in an email client, and guarantees a further reach (better email client compatibility).
The @font-face code will eventually go between the <style> tags in your code:
/* latin */
@font-face {
font-family: 'DM Sans';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://fonts.gstatic.com/s/dmsans/v10/rP2Cp2ywxg089UriAWCrCBimC3YU-Ck.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}Obtaining this code will take a few steps. However, it’ not impossible.
First, find the font you want to use from Google Fonts. Then, choose the style(s) you want to use. A fly-out menu will appear on the right-hand side of the screen. See pic below…
Select and copy the URL in the code that Google Fonts gives you. Now, paste that URL into a new window / tab and tap Return. This will take you to the stylesheet that Google uses for that font. See pic below.
Next, copy the @font-face code for each font weight you’d like to use.
IMPORTANT: Make sure to copy the “Latin” version.
Lastly, paste the Latin version of the @font-face code between your <style> tags.
It should look something like this:
<table>
<style type="text/css">
/* latin */
@font-face {
font-family: 'DM Sans';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://fonts.gstatic.com/s/dmsans/v10/rP2Cp2ywxg089UriAWCrCBimC3YU-Ck.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
</style>
<tr>
<td style="font-family: 'DM Sans', Helvetica, Arial, Verdana, sans-serif;">
Styled Text
</td>
</tr>
</table>I hope this little tutorial helps you create better looking, more widely reaching email signatures! Let me know if I missed anything, or if I can answer any questions!
3 years ago | Apr 06, 2022 | Leave a Comment
