In our previous blog, Uplers enlightened about there being no single “Approved” font, the significance of the simple fonts in body text and reserving the fancy fonts to the headings for attaining a sparkling email body copy.
In the current scenario, web typography is improving by leaps and bounds but email typography is less than ideal, constrained by email client support. But this hasn’t kept email marketers away from expressing their creativity. Web safe fonts is their favored tool for bringing out the spark in emails.
Web-Safe Fonts: Richness v/s Compatibility
The graph above shows the 3 choice of desired fonts in your email. @font-face in CSS, calls for the custom font stored on web hosting site. Both premium and Google fonts can be served using @font-face rule. As you can observe moving towards right the compatibility increases at cost of richness and vice versa.
Choosing the right fonts is very important.
Ideal method is to use Web safe or Google fonts, considering their aspect ratio (explained below) with email safe fonts and thus allowing max email clients to cover richness with compatibility while non-supporting email clients would still bring the fallback fonts without breaking the layout or template.
Breaking on layout usually happens when you choose wider or larger fallback fonts.
You can even use a good image text ratio by converting all titles or prominent one liners into images and then using fallback fonts for paragraphs fonts. That would allow you keep your fonts intact for major prominent messages while allowing text render for others.
Criteria for Choosing appropriate fallback fonts
Ever since email marketers have adopted HTML emails, the race to offer personalized content has begun. Email design and aesthetics came into priority. Imagine a scenario wherein your email has an optimum design with beautiful typography; due to lack of fallback support, the system font ruins the entire look. Scary!!!???
In the 3 seconds that your perspective customer takes to read your email, they may delete or mark it spam (gasp!). Ideal Characters per Line (CPL) is 75 and ideal email has a 600px width. Based on various factors the CPL changes and along with it the placements of words changes leading to pre-mentioned chaos. In order to save yourself adopt the following factors while deciding your primary and fall-back fonts.
Fig: Text with same font size and weight has different width which may cause improper text display.
Maintain Aspect Ratio: Each character in your font has 2 values: X-width and Y-height. The values should change proportionally. High width and low height or vice versa fonts shall generate low readability. Moreover while choosing fall back font, ensure that x-width is same to the primary font in order to maintain CPL.
Fig: Times New Roman & Apple Garamond have same height but different width which changes the aspect ratio.
Character Spacing: CPL is also dependent on the space between two characters. Less space will look cramped up and excessive spacing shall generate eye strain to stay on the same sentence.
Line Spacing: The vertical spacing between characters on two consecutive lines. This is also dependent on the y-height.
Font Widths: Depending on the value of the font weight, the thickness of the font changes shall change the CPL. Never use condensed font weight.
Fig: 3 Different font weights of the same font (Lato) have different line width.
Serif or Sans-Serif: Generate uniformity by providing serif fallback to primary serif font and vice-versa.
Pixel Width of different Sans-Serif Fonts
Takeaways:
- Choose fonts that works best for your design for all email clients.
- First choose any websafe or Google Fonts and then match up those with appropriate fallback fonts, on the basis of it’s aspect ratio and character spacing.
- Avoid using Condensend fonts as no fall back fonts have condensed property.
- Myriad pro and Calibri have least support when it comes to rendering same fonts in Apple Mail.
- @font-face is widely used compared to @import.