|
Part of the process of designing an email is choosing what font, or fonts, you want to style your text with. While you’ll always want your first choice of font to be the one your recipient’s email client, webmail client or app renders, that may not always be possible. There may be several reasons for this.
Misrendering reasons
Reason No.1
It may be that your first choice of font is a web font, which will only render on email clients that support web fonts, such as Apple Mail on iOS, iPadOS and macOS.
Reason No.2
It may be that your first choice of font is a system font, which will only render on a selection of your recipient’s email clients, webmail clients and apps, depending on whether or not they are using the appropriate operating system.
Reason No.3
It may be that your recipients are using an email client, webmail client or app on a device that only renders a limited family of fonts, such as Droid or Roboto on Android.
|
Given that your first choice of font, or fonts, may not render, you must define a second choice of font or fonts, as an absolute minimum, and possibly a third, fourth and fifth choice too! You define your choices using a font stack, and that’s what I’ll look at in this issue.
What is a font stack?
A font stack is a list of fonts listed in order of choice (e.g. your first choice, your second choice, your third choice, your fourth choice, your generic choice). You define your font choices using font-family in the following format:
|
font-family:your first choice, your second choice, your third choice, your fourth choice, your generic choice;
|
When rendering your email’s text, your recipient’s email client, webmail client or app will render your first choice of font – if it’s available. If your first choice isn’t available, it will move on to your second choice. If your second choice isn’t available, it will move on to your third choice – and so on, until it reaches your generic choice.
Generic choice
The last choice in your font stack should be your generic choice. This choice will render if none of your previous choices are available.
There are five generic choice fonts, and you should use the one that’s the same category as the other fonts in your font stack. For example, if the fonts in your font stack include Roboto (a web font), Helvetica Neue (a system font) and Arial (a web safe font), which are all sans-serif category fonts, your generic choice font should be sans-serif, as follows:
|
font-family:Roboto, Helvetica Neue, Arial, sans-serif;
|
Here are the generic choice fonts, alongside fonts from their respective categories:
If you don’t include a generic choice font, and none of your other choices are available, you run the risk of your recipient’s email client, webmail client or app rendering your font or fonts in a font from a different category.
Web safe fonts
It’s worth stating, that if your choice of font is web safe (e.g. Arial (sans-serif), Georgia (serif), or Courier (monospace)), it, by its very nature, will render for your recipients. However, there are some exceptions to this. Even web safe fonts, such as Arial, will render as Droid or Roboto on Android, as it only renders the fonts available to it on its operating system.
Creating your font stack
How you go about creating your font stack will depend on the type of fonts you want rendering in your email. Let’s look at some examples:
|
