Last week we expanded our standard font offerings to include several popular Google Web Fonts. We’ve always prided ourselves on great design—and empowering our 14 million users to embrace it as well. These new fonts give you more options for creative expression, help you create consistency across your brand, and give you an edge in the increasingly crowded inboxes of your customers.
With more than 800 available fonts, narrowing down which ones to choose took special consideration. Instead of opening up the entire library, we hand-picked fonts that match some important criteria. We decided that our new typefaces should:
- Look great no matter how they’re styled. We want people to use italics, bold, and underline.
- Include international character sets in addition to English.
- Be flexible enough for use in both body copy and headings.
- Have some personality, but nothing so intense that it could limit broad appeal. Looking at you, Lobster.
- Already be relatively popular amongst Google Font users.
- Be an adequate mix of serif and sans-serif typefaces (plus a slab serif or 2) for typographic variety.
Ultimately, we decided on Arvo, Lato, Lora, Merriweather, Merriweather Sans, Noticia Text, Open Sans, Playfair Display, Roboto, and Source Sans Pro.
Having access to a bunch of fonts is great, but using them well is a big undertaking. Practical Typography is a good resource for learning the language and rules of good typography. It even claims you can learn how to use better typography in 10 minutes. Skillshare also offers some free courses on typography basics that I’ve found valuable.
Here are some things to consider as you add fonts to your campaigns and templates:
Each font has a personality and feeling behind it. When in doubt, rely on your brand’s voice and tone. If your campaign didn’t have any imagery, would your readers still know it was coming from you? Does the font feel right? Do your brand guidelines already have a preferred font?
Don’t go overboard. Use different fonts sparingly and intentionally. This can be done by using one consistent font for headers and another for body. These pairings can add a uniqueness to your design and have beautiful results. If you’re looking for further inspiration, each of our new fonts has recommended pairings on its Google Font page.
It’s not all about the font family. Tweaking the line-height, font sizes, and color can have a huge impact on visual design. We recommend setting the body text size within the 14-16px range; 14px text works well for text-heavy emails, while 16px is better suited for shorter ones (2-3 sentences).
There are semantics and best practices behind using italics, bold, and underlining. On the web and in emails, underlining is often used for links, not emphasis. If you need to add emphasis to a section, experiment with background colors or lowering the visual priority of other sections. Adjusting font sizes or colors is a common way to do so.
And don’t forget to test in different clients. Web fonts aren’t supported in some popular clients, namely Gmail, Outlook, and Yahoo. We’ve matched each web font with safe fallbacks, but they may not render exactly like you’d expect. Our Inbox Preview testing tool can help, too, of course.
We’re excited to have web fonts in Mailchimp. And with the holidays creeping right up, it’s a great time to try something new. We can’t wait to see how you put these fonts to work.