Use web-safe fonts to add personality to your emails while keeping your message clear and readable. At the same time, see how web fonts display in different email clients as not all fonts are fully supported everywhere.
What are web safe fonts?
In most online text editors you tend to find the same, small set of available fonts. These are the ones typically installed on your device and are the fonts that are normally referred to as “web-safe” fonts.
This is because the set of fonts available on your computer is defined by the fonts that came with your operating system, those added by applications you installed, and individual fonts that you’ve added manually over time.
As you can imagine, the resulting list of installed fonts can vary greatly from device to device. There is a subset of fonts, however, that are considered a common as they are almost always found. Those are what we refer to as web safe fonts:
- “safe” because they are available on pretty much every device.
- “web” because they are used when editing documents online.
In the Drag-and-drop editor, you will find these web-safe fonts at the top of any font selection tool. They are:
- Lucida Sans
- Times New Roman
- Trebuchet MS
When can we use web fonts?
Web fonts are available online, served by services like Google fonts. Your device downloads them only when needed (so there is no need for them to be installed in your computer/device). The word “web” in this case refers to “created for the web, and distributed online”.
Web fonts are available to help us expand our text style choices and go beyond standard web-safe fonts.
This sounds like the perfect solution, but unfortunately, not all email clients support them. Known email clients such as Outlook (desktop and web), Gmail and Yahoo! Mail don’t support web fonts and display the text with their default font.
Because of this lack of support, we’ve built font stacks in the editor (using cascading style sheets) that automatically tell any email program how to “fall back” to a safe font when that email client is not able to render them. The stacks work as a descendant list of choices: if the first one is not available, it moves to the next.
Fonts are grouped together to offer the best possible fallback solution. This ensures that the layout won’t break when the selected font is not supported. The variables we considered when building these font stacks were font shape and font size.
The following is a simplified list of the available font stacks:
Example: Web font › Web safe fallback list of options
- Bitter › Georgia › Times › Times New Roman › serif
- Droid Serif › Georgia › Times › Times New Roman › serif
- Lato › Tahoma › Verdana › Segoe › sans-serif
- Open Sans › Helvetica Neue › Helvetica › Arial › sans-serif
- Roboto › Tahoma › Verdana › Segoe › sans-serif
- Source Sans Pro › Tahoma › Verdana › Segoe › sans-serif
- Montserrat › Trebuchet MS › Lucida Grande › Lucida Sans Unicode › Lucida Sans › sans-serif
- Ubuntu › Tahoma › Verdana › Segoe › sans-serif
Notice that we’ve kept an eye on the typography design and didn’t add fancier or more complex fonts – such as the Lobster font – that wouldn’t have an appropriate fallback font.