Typography Tips – How to Choose the Right Fonts and Colors for Your Email

In any email marketing campaign, good quality content is paramount but the presentation of that content through typography is also equally important if not more. The design of the words or to be precise ‘typography’ in your email affects the decision making of the recipients, and this has been proved in various studies and researches.

According to a study titled “The Aesthetics of Reading” by the famous psychologist Kevin Larson, typography in emails not only affects the emotions of the reader but also influences the click-through rates.

Since the effective use of typography is that important in emails and email marketing, you must know how to choose the right fonts and colors for your email. Here are some awesome typography tips to not only make your email STAND OUT but also evoke the desired action from recipients:

What’s the personality you want your email to convey

Email-Personality

Your email needs to have a personality of its own. Each and every element you want to include in your email – your logo, tagline, copy, social sharing buttons, etc. needs to be aligned towards a central brand personality. This will decide on the vibe you want your email to give out. Ask yourself about the personality you want your email to convey.

Do you want your email to be professional and formal?

Do you want it to be casual and humorous?

Do you want it to be striking and crisp?

Once you decide on this, you can move to the next step, i.e. deciding on the typography of your email. Typography includes the font, style, arrangement, and appearance of the words.

Choose your anchor font

There may be many segments of content in your email such as headings, sub-headings, body, CTAs, etc. First, select the font for the body copy of your email. And then based on this, select the font for other segments like headings and sub-headings. You can select the fonts from the following 4 categories:

Typography-Categories

(Source: Bi-Notes)

  • Serif – Letters with short lines at the edges. These fonts, when used, lend a formal and business-like personality to the words. Serif fonts are easier to read on the web and are generally used to make the email look like a print editorial. 
  • Sans-serif – Letters which do not have any short lines at the edges, and hence called Sans-serif. When used, these fonts lend an informal and casual personality to words. Highly preferable font for body text. 
  • Script –This font resembles handwriting in the letters of past and lends a personal and intimate personality. Although visually appealing, the font loses its charm when used for a large paragraph of text and so is not suited for the body copy. It can be used for any ‘announcement’ or ‘invitation’ part in your email. 
  • Decorative – Any kind of font that doesn’t fall under the above three categories is commonly categorized as decorative. These fonts provide a contrasting feel when paired with a serif or sans-serif font. Best suited for logos, headings, and catchy taglines in the email.

Email-safe V/s Custom Fonts:

While choosing the font for your email copy, it is worth understanding that not all fonts you wish to use in your email will be visible as it is to your subscribers. Email clients, while rendering your email, will use the fonts specified in the code based on the availability on subscriber’s device.

Let’s say you have used Helvetica Neue as the font for email copy but unfortunately your subscriber doesn’t have the font installed in their device. In that case, the email client shall look for a fallback font and if no fallback font is specified, the email copy will be displayed in the default system font.

In case you are wondering what’s the difference, check out this example:

Mouthful-Combined

(Source: ReallyGoodEmails)

In the above image, the left section is the original email design and the right one shows the email in the fallback font. When you are using inappropriate fallback font, the aspect ratio i.e. the x-height and character spacing, changes. So, the paragraph of 6 lines on the left takes up 8 lines on the right and this can disturb the overall email layout or increase the overall email length substantially.

So, the thumb rule while choosing your font is, preferably use a system(email-safe) font for email copy if you wish to maintain the aesthetics as per the email design. In case you are using a custom font, don’t forget to include a fallback font. The hierarchy while specifying the fallback font should be:

Primary Font (Custom Font) > Secondary Font (Fallback Font) > Email Safe (System based font)

Even in case of system based fonts, owing to legal reasons, the name of the same font changes from OS to OS. Lucida Sans Unicode in Windows is available in Mac as Lucida Grande and Tahoma is named as Geneva in Mac OS.

In a situation wherein the custom or decorative font is not available in your subscribers’ device, you can include it in the form of an image. This way, your subscribers who have enabled images in their emails shall see the intended text in the font that you desire. Most brands use this technique to display the brand logos.

Find colors that suit your brand

Selecting the right colors for your email is very important for giving off the right vibe to the recipients. It has been proved that colors have the capability to trigger shopping behavior. Also, different colors trigger different emotions in people. So, it is essential that you judiciously use colors in your email.

Only use those colors in your email that match your brand and limit the usage to maximum 3 colors. Usually, darker text on a lighter background works best for any type of email. And when it comes to headings, bold colors create the desired impact.

When choosing colors for your email, make sure that you get the color combination right. For example, look at the 2 email examples shown below:

Levenes Email

(Source: Mailjet)

The above email looks gaudy and unattractive due to the assortment of colors used in it. Such an email is sure to put off the readers in an instant. Even though the fonts used are legible, the font color (too many!?) clashes with the background, and the text in the image is too cluttered. Readers might skip reading the whole email and this brings down the chances of conversion to zero!

Litmus Live Email

Litmus, on the other hand, hits the bullseye with this email. In addition to having a clear layout and ample amount of white space, the colors chosen are visually appealing. From the typography point of view, this email disperses information in small chunks by using uniform font size and consistent formatting. The centrally aligned text and chosen fonts make the overall email legible. This way the email recipient can easily scan through it and collect important information.

Keep your email legible

There is no point in sending an email if people have to strain their eyes to read it. Hence, make sure that you select typography in which the letters are easily decipherable. The moment it becomes difficult for subscribers to read through your email, you have already lost the battle.

Here are some tips to make your email legible and effective:

1. Avoid using more than 2 fonts:

Since you have already decided the personality of your email, it is now easier for you to zero-down on the fonts to be used in the email, because specific fonts express specific personality of emails. If your brand personality is professional but you want to add a little fun to your email, you can try pairing a decorative font with a serif font; don’t go overboard, though. You need to ensure that you don’t use more than 2 fonts in your email.

2. Use complementary fonts:

Font Pairing Chart

(Source: The Branded Solopreneur)

While you are using 2 fonts in your email, make sure that the fonts you use complement each other visually else what your subscriber receives shall be less of an email and more of confusion.

In the email example below, you can observe that the combination of the handwritten font for title works well (complements) with the email body copy presented in a sans-serif font.

3. Keep it BIG but avoid all caps:

The world has moved to mobile devices with smaller screens but better screen resolutions compared to desktop PCs. Larger font sizes evoke a stronger emotion in the minds of the recipients. The 16pt font is fast becoming the most preferred font size when it comes to email design. But strictly avoid using all caps since that will make people feel like you are shouting at them!

4. Spacing matters!

When it comes to typography in emails, adequate spacing between letters helps your readers move smoothly through the sentences. Lack of adequate spacing strains the eyes of the readers and ultimately makes them abandon your email without taking the desired action.

Wrapping Up

Packaging your email with the right typography is extremely important as it not only impacts the look of the content but also the way people respond to your email. And if you are successful in evoking the desired emotions and response, your marketing efforts will definitely be rewarded!

Head of Marketing

Kevin, the Head of Marketing at EmailMonks – one of the fastest growing Email design and coding companies, specializes in crafting beautiful email templates, PSD to HTML email conversion and much more. He loves gadgets, bikes, jazz, and breathes ‘email marketing’. He is a brand magician who loves to engage, share insights with fellow marketers.



10

Leave a Reply

Your email address will not be published. Required fields are marked *

Deals

Iconfinder Coupon Code and Review

Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

WP Engine Coupon

Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

InMotion Hosting Coupon Code

InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

SiteGround Coupon: 60% OFF

SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.