What You Need to Know About Fonts in Email
Aesthetics plays an important role in the modern world: in what you wear, what you buy, and even what you prefer to see. Visual appeal in email newsletters is also one of the deciding factors. It is not in vain that we spend hours selecting pictures and writing text to make our letter look perfect and be appreciated by readers.What you need to share in your newsletter depends not only on the words used, but also on how they are portrayed.
In other words, typography is one of the branches of graphic design that is responsible for the presentation of the text component.
Why is typography so important?
Typography is more than a choice of fonts. This is the study of how people read, perceive information, recognize words, and how the brain processes information.For example, creating a visual hierarchy is important for directing readers' attention. It is the process of organizing and prioritizing content or images in such a way that it gradually brings attention to the most important part of the letter and makes the information easy to read. The visual hierarchy is like a pyramid - with the most important elements at the top (rendered in larger fonts), information gradually aligns according to its importance as you move down the text.Typography allows you to create this visual layout in order of importance, using color, font, size, alignment, and style.
What is typography made of?
Let's take a look at the key elements of typography:
1. Typeface: This is a term commonly confused with "type". It is a collection of symbols, numbers and letters that have the same design. In other words, it is a family of fonts that share similarities.
A typeface, on the other hand, refers to a typeface that has a specific size, style, and weight. For example, Baskerville Old Face Bold is a font. So, the next time someone asks you about your favorite font, know what it actually means a typeface.
Fonts can be classified into 2 types: serif and sans serif. Serif fonts are easily distinguished by the extension that each character has.
The most common fonts in this category are Times New Roman and Georgia.
Most web typography uses Sans Serif fonts because they have a more modern and readable look.
2. Line length: often calculated as the number of words or characters in a line, line length refers to the distance a block of text occupies between the left and right margins.
3. Line spacing: Also known as leading, it refers to the distance between the baselines of adjacent lines. The baseline is an imaginary line on which the text (s) lies.
4. Kerning: the spacing between individual characters or letters.
5. Point size: conditional font size; distance from bottom of lowercase p to top of uppercase P.
How to choose a font when designing newsletters
Given the popularity of mobile devices, we are faced with a rather difficult task, because a font should:
- match the corporate identity of the company
- good readability from displays of different formats
- display correctly no matter what device your email is open on.
It is necessary to take into account the psychological aspect: the same text, typed in different fonts, will be perceived differently. Research by Hyunjin Song and Norbert Schwarz shows that the way we perceive information can be strongly influenced by the type of font used to convey that information. The bottom line of the research is that if you need to convince a client to complete a task, you must describe that task in simple, easy-to-read type.
When choosing an email typeface, keep in mind the target audience for which you are creating your newsletter. For example, Trebuchet is suitable for subscribers of a toy store, and the straight-drawn typefaces of the Helvetica or Arial families convey a business mood and are almost universal typefaces.
Images and other visual media such as banners, backgrounds, and buttons (CTAs) can include any fonts that you have access to in graphics software. What's more, visual file formats give you the ability to "lock" your fonts so that they look the same across multiple devices.
There are a few rules to follow when choosing a font.
1. Use secure headsets
Each designer has several bright and unusual typefaces that they use for special occasions. However, these headsets will not appear on most mobile devices. Safe headsets are those that are installed on most devices and display correctly in almost all cases.
The following sans serif fonts are commonly used for mailing lists: Arial, Impact, Lucida Grande, Tahoma, Verdana, and Helvetica.
Serif fonts include Georgia, Times New Roman. These fonts are available in any service and will display seamlessly on any device.
2. The typeface in letters must be easy to read
When using type in images, it is also best to choose a clear and legible font so that it does not distract from the overall purpose of the letter. If someone has to spend an extra 4 seconds to understand what is written, then they will ignore not only the design, but also all your incomprehensible email newsletter.
3. Use web fonts
Web fonts, which should not be confused with safe fonts, are becoming more common. They rely on a different method from the first: downloading headsets from the Internet, as opposed to individual computers, email clients, and ISPs. The most common source for web fonts is Google Fonts. The most popular email services, including Gmail and Outlook, display them seamlessly.
4. Do not use more than 2 headsets
If you use different typefaces: italic, bold, and bold, you will have 6 fonts. However, there are times when you want to use multiple typefaces to highlight elements of your design. You can pair headsets if:
- they are from different categories, but have the same lowercase height and glyph width;
- body text is in sans serif, and headings and topics are in serif.
These 2 principles will help you choose the right font. As you develop your font selection skills, you will develop your own rules. There are no "wrong" or "right answers" here.
How email clients render fonts
How email clients render a font depends on the availability of a particular font on the device.
According to litmus.com, the following email clients support web fonts:
- iOS Mail
- Apple Mail
- Android (default email client, not Gmail app)
- Outlook 2000
- Outlook.com app
- Thunderbird
At first glance, the list is rather short, but these mailers are among the ten most popular clients.
Other email clients typically only display fonts that are available on the device and are used to open email.Those mailers that support custom fonts check if the main font is available on the system. If the specified font is not available, it displays the fallback font.
If you check the html of your email, you will find some code like this:
style = "font-family: 'Montserrat', Arial, sans-serif;”
In the example given, if the Montserrat font is not installed on the device, the email client navigates to the next specified font Arial. Therefore, you need to provide a fallback to cope with a situation where your chosen base font is not available on the mailing list recipient's device. If you are using a customized font that does not have a suitable fallback font, it is recommended that you use an image font instead of text.
Headset color in mailings
High-contrast text in the background is always easier to read. The most common colors are black # 000000 and gray # 333333 (16%). According to SmashingMagazine, emails use 28 different shades of gray.
Checklist - once again about the main thing
- Arrange information in the letter according to the visual hierarchy: from more important to less important;
- When choosing a font, pay attention to its readability on different devices;
- Try not to use non-standard fonts - most likely they will not appear on the client;
- Don't use more than two different typefaces in your letter;
- Smart use of fonts, colors, and text alignment can add emotion to your message;