The Divine Story of Modified Typeface

The Enchanting Tale of Typography in Emails

Uplers take you on a fascinating journey where Art meets Alphabets, where letters and words
flow together seamlessly to create TYPOGRAPHY. We track its story as it evolved from being a
background element to one of the most essential entity in email design.

  • How typography has evolved over the years
  • How a specific font conveys a particular emotion
  • How to select the correct fallback font
  • How to choose primary font based on the fallback
As stated in a Radicati Report, by the end of 2020
the number of email users worldwide will top
3.0 billion Grasping and holding the attention of your subscribers and potential leads through emails is thus a great challenge. Good use of typography can help a great deal here.

Owing to the hardware capabilities of computers in 1971, Unicode ASCII was the only
font used to display information onscreen. Technology has progressed to an extent that
with implementation of CSS with HTML, modern emails flaunt different fonts,
background colors & even font styles. Support for custom fonts is limited.

thanks to html for adding the scope for giving emails a personality with colors, images and fonts.

tweet

Experimentation over the years in emails has brought forth unique typography that's
caught the eye and attention of many. Experimentation over the years in emails has brought forth unique typography fonts that have caught the eye and attention of many.Email marketers are now open to experimenting with
an email's template color, structure, fonts, etc.

Based on the email opens, 46% of email clients shall support custom fonts in your emails.

tweet

The Most LOVED Typography Fonts in Emails

Fonts used in emails can be classified into 4 categories. Moreover, the way each character is
shaped in a font category, reflects a personality of its own.

  • search

    Serif

    Serif fonts have characters with flourishes, points, and shapes on the ends of their strokes. A professional email font, it has a formal look, well-spaced characters, and line spacing, greatly improving readability. Most popular fonts in this category are Times, Georgia and MS Serif.

  • search

    Sans Serif

    Sans serif fonts are like the rebellious kind who wish to create an impression of their own and so don't have any fancy 'embellishments' attached. Among the most widely used email fonts, they have a semi-formal look which promotes practicality over looks. Most popular fonts in this category are Arial, Tahoma, Trebuchet MS, Open Sans, Roboto and Verdana.

Pro Tip: It is a good practice to use not more than 2 different fonts in an email.

tweet
  • search

    Monospaced

    Inspired by the typewriter font, these email fonts have a block or 'slab' at the end of the characters. Though rarely used in an HTML email, most of the 'fallback' plain text emails in MultiMIME emails use these fonts. Reading an email using these fonts gives an administrative feeling associated with government documents. Courier is the most commonly used font in this category and is often regarded as a professional email font.

  • search

    Display

    These family of email fonts instantly call attention to themselves courtesy of their undisputable flamboyance and quirkiness. However, even though they might be quite fun to read in a tangible medium, reading them on a digital screen can be quite cumbersome and eye-straining. So, such fonts are mostly used in headings or logos in the form of a static image.

Select Fonts in Emails

Creating Typography that Matters for your Brand

Having a knowledge of the different types of fonts is not sufficient. Before jumping onto
designing an email, it is important to understand the typography fonts that will suit your
industry and brand image.

Typography relies heavily on factors that decide the eye scan path as well as the
attention period the reader shall give to that particular paragraph.

1Choosing the Primary Font & Fallback Fonts

From the readability point of view, Serif and San-serif (more preferred) fonts are used for emails. And even among the fonts that fall under these categories, the web-safe fonts for email are the ones that are used widely. In the case of using custom fonts, you need to provide appropriate fallback fonts as shown in the following code.

In the code below, the email rendering engine shall first look whether the
custom font is installed on the device and move to the fallback if
the previous choice is not available.

  • "fallback-font" style="font-family: 'Montserrat', Arial, sans-serif;">
  • Your text here

no matter how pretty your proprietary font looks in your email design, choose it only if the fallback font matches it.

tweet

A Free-fall with Fallback Fonts in Email

While selecting a fallback font, it is necessary to ensure that the
following factors are satisfied.

X-Height

In the miniscule set of any font, the so called "height" is the space between the baseline and the mid-point, which is often the height of the lowercase letter x.

Kerning

Letters are Kerned when the spaces between letters are closed up, bringing them closer together.

Be-aware: Outlook is notorious for overriding any specified font to render in Times New
Roman, so additional code is required to force the fallback font.

Choose your levels of Fallback fonts

Email clients render fonts based on their presence on the device. If a specified font is not available then
the email client proceeds to next font specified in the code. So you need to have 3 levels of fonts in your
emails.

  • 1st

    Level

    Your custom font.
  • 2nd

    Level

    Fallback font i.e web-safe font.
  • 3rd

    Level

    System based fonts which would be the final fallback. This would render, anyhow.

2Keeping it in the Family

Once the main font is selected, you can experiment with other fonts in the family in order to create different effects within the email copy without using a new font.

3Stay in your width

Based on the eye scan path, long sentences are often skimmed and not read.

Line width of 35 characters or 6 words of 12-14px font size are found to be easier to read in both desktop as well as mobile.

4Maintain Line Spacing

The spacing between two lines is very important. If two lines are very close to each other, your subscriber may end up reading the same line twice. Suitable spacing should be around 1(1/2) times the font size.

65% of email users worldwide access email via mobile. Proper line space & linewidth in typography is essential

tweet

5Emphasizing on Visual Hierarchy in Emails

Most people prefer left aligned text. But with most emails opened in mobile devices, center aligned text is
being widely used.

Hues play a grand role in grabbing the attention of your email recipients. Most designers use pitch black (#000000) as the font color or shades of it (#333333 or #2d2d2d) against light backgrounds. This is because light-colored font over a dark background is easily legible but too taxing on eyes.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.

Having contrasting and colorful typography fonts can enhance the overall look and feel of the email. Also, some email developers highlight their links in separate font color to draw attention. Make sure to optimally use the white space around the typography fonts so as to ensure the legibility of the text.

Too much text can hamper the focus of your email. Make sure you keep the right balance between your
typographic text and images.

Typography is prevalent in the modern emails. We have collated a lookbook with brands who dazzle their subscribers with stellar typography. Download NOW!

  • Limited email clients support custom web-safe fonts, but trying them in your emails is worth the effort.
  • First choose your fallback font and based on it, select your primary font. Also make sure that the
    x-height and kerning of both fonts match.
  • Use your proprietary fonts in images if you don't have their appropriate fallback (not recommended).
  • Emphasize on visual hierarchy by making use of contrasting font size, colors and white space.
  • Outlook needs special care to render fallback fonts.
Email Design, Email HTML Coding

Uplers design and code flawless emails, newsletter templates, landing pages, and digital assets such as banners. In addition, we also offer email automation and campaign management services. To know more, email us at
contact@uplers.com or visit email.uplers.com