Back in 1984, experts from Microsoft and MIT found that well-formatted text is read faster and with more enjoyment. This rule applies to emails too. So to keep your newsletter metrics strong, it's worth paying special attention to typography.
In this article, we explain what web design fonts are and how and why to use them in newsletters.
What web fonts are and what types exist
Web fonts are fonts adapted for use on web pages. Fonts for web design fall into 2 categories: web-safe and standard. |
|---|
Web-safe fonts for email design
These fonts are called standard or system fonts. They're already pre-installed on many devices and adapted for different operating systems, so they display the same way for every user.
The most popular web-safe fonts:
- Arial.
- Helvetica.
- Verdana.
- Georgia.
- Times New Roman.
- Tahoma.
By using them in your newsletters, you can be sure they'll display correctly on any device — computer, phone, or tablet. However, these fonts won't let you reflect your brand identity in emails or make them stand out. That's why designers often use non-standard web design fonts instead.
Non-standard web fonts for email design
This is what the article is really about. Using non-standard or custom fonts lets you diversify an email's visuals, add originality, and reflect brand consistency.
Such fonts differ by type, purpose, character, glyph set, language support, and completeness (a family can include several subfamilies and styles). You can find and download original fonts for your website and emails for free at Google Fonts.
These sites offer thousands of modern fonts to choose from: serif and sans-serif, colored and monochrome, handwritten, decorative — whatever you're after.
How to use unusual web fonts in newsletters
The process is simple and consists of two main steps.
- Get the URL of the font you want to load.
- Import the font into your code using one of three methods: <link>, @import, or @font-face.
Let's look at how to embed a font using Google Fonts as an example.
To get the URL, select a font and style, then click Select…, choose an embedding method, and copy the address.
For the <link> and @import methods, it's simple — just copy and paste it into your email code. But if you go the @font-face route, you need a few more steps:
- Copy the font link in <link> mode.
2. Paste the link into your browser's address bar to get the CSS stylesheet Google uses.
3. Copy the URL in the cyrillic version and insert it into your code via @font-face. Done!
Using @font-face is a more optimal way to add a font to an email, since this rule lets you format text — choosing style, size, and typeface. You can also add a fallback web-safe font that will display in the email if the user's device doesn't support the main one.
What else to consider when working with fonts for emails and websites
For text to load quickly and display correctly in an email, the font needs to be "embedded" in a specific format.
There are six font formats in web design:
- TTF (TrueType Font).
- OTF (OpenType Font).
- SVG (Scalable Vector Graphics).
- EOT (Embedded Open Type).
- WOFF and WOFF2 (The Web Open Font Format).
The most popular and trouble-free format is WOFF and WOFF2. It's supported by most modern devices.
Why use non-standard web fonts in email newsletters and on websites at all
- To emphasize brand identity. If your brand book includes a custom font, or you want your newsletter to stand out from the rest, complement the design with a unique font.
- To create a cohesive visual style. Typography helps tie all the elements of an email together and make each one distinctive, reinforcing the company's positioning.
- To let the user interact with the text. If you send a discount promo code, the reader needs to be able to copy it. If you leave the text inside an image, you risk losing a potential customer, because few people will want to retype the text from an email into a promo code field.
- To design a beautiful email without images. Sometimes an image feels unnecessary for a newsletter. In these cases, unusual fonts are used to give the email a distinctive style. This helps keep the text visually appealing even without illustrations.