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.
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. 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
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.
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.
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.
Pro Tip: It is a good practice to use not more than 2 different fonts in an email.tweet
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.
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.
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 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.
no matter how pretty your proprietary font looks in your email design, choose it only if the fallback font matches it.tweet
While selecting a fallback font, it is necessary to ensure that the
following factors are satisfied.
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.
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.
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
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.
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.
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 essentialtweet
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 dark background is easily legible, but too taxing on eyes.
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. 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.