The Divine Story of Modified Typeface

o you remember reading old story books with beautifully written
alphabets that enchanted and captivated you?

he giant curved ‘O’ in Once upon a time, beautifully illustrated with
curvaceous sides, and blocks of letters coming together to form words which
in turn weaved figments of authors’ imagination in your mind.

Got the nostalgic feel?

the Enchanting Tale of Typography in Emails

Monks 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 affable entity in email design.

  • Right from how typography has evolved over the years, how a
  • specific font conveys a particular emotion, selecting the correct
  • fallback font and choosing primary font according to it, Monks give
  • a complete lowdown about the typography used in emails.
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.
in email
  • When emails were a part of inter-departmental
  • communications, messages were crisp and short. As
  • per the hardware capabilities of the computers,
  • Unicode ASCII was the only font used to display
  • information on screen.
  • Plain text emails were overtaken by HTML emails.
  • This opened the prospects for changing font, font color, font
  • size, background color, images and many elements in emails
  • to make them visually attractive. The sole restriction was
  • that emails could only render system-based fonts.
  • CSS coding was integrated into HTML. This
  • managed to make the email more interactive
  • and introduced the possibility to use custom
  • fonts hosted at a remote location using
  • @import and @font-face.

Thanks 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 has 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, 60% of email clients shall support custom fonts in your emails.

tweet

The Most LOVED Typography 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. They have 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. 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.

  • search

    Monogram

    Inspired from the typewriter font, these 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.

  • search

    Calligraphy

    Imitating the handwritten letters of the past, what sets these fonts apart is the flowing movement that each character follows. These fonts are quite fun to read in a tangible medium, but 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 static image.

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

tweet

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 that will suit your industry and Brand image. Some fonts have naturally created
an impression of being associated with certain occasions such as Back to School, Thanksgiving and Christmas.

Here’s a lookbook featuring exclusive brands
that have nailed the Typography game.

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 are the ones that is used widely. In case of using custom fonts, you need to provide
appropriate fallback font as shown in the following code.

In the above code, 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 a miniscule set of a 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 the final fallback which 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.

The (font) family that stays together (in an email), looks good together.

tweet

3Stay in your width

Based on the eye scan path, long sentences are often skimmed and not read. This is especially
important for those reading your emails in mobile devices.

Line width of 35 characters or 6 words of 14-16px font size are found to be easier to read in screen width of 440px (mobile and Tablets).
Line width of 66 characters or 12 words of 14-16px font size are found to be easier to read in screen width of 660px (Desktop).

4Giving your lines some breathing space

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. Close-fitted text affects the readability of your email. Suitable spacing should be around 1.5 times the font size which means
for a text of 16px font size the line spacing should be around 24px.

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) or shades of
it (#333333 or #2d2d2d) against light backgrounds as font colors. This is because light font over 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 can enhance the overall look and feel of the email. Also some email developers highlight
their links in separate font color to draw attention to it. Make sure to optimally use the white space around the typography so as to
ensure 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.

with Mesmerizing Typography

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

  • Limited email clients support custom web-safe fonts, but it’s 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 it’s 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.

Embed this infographic:

Email Design, Email HTML Coding

Email Monks

Email Monks design and code heavenly emails, newsletter templates and landing pages.
To know more, email us at hello@emailmonks.com or visit www.emailmonks.com