Copy
The art of combining two fonts that complement one another.
View the web fonts in your browser
Type E:

03. The Font Pair Issue
ME & YOU.
I ♥ Type!
 

Font pairing is the typographic technique of combining two fonts that complement one another, and can be used to great effect on email. In Type E:, I pair Helvetica Neue with Courier New, specifying ‘system’ fonts Arial and Courier as fallbacks in the font stack. In this issue, I’ve taken a look at a few different font pairings, using both ‘system’ fonts and ‘web’ fonts.

 
Font Pair Characteristics
 
Font pairs are characterised by their contrasting attributes, and these might be expressed in a number of ways, including:
  • Contrasting Typefaces:
    Serif (e.g. Georgia) with Sans-Serif (e.g. Arial); Monospace (e.g. Courier) with Sans-Serif
  • Contrasting Weights:
    bold with lighter
  • Contrasting Typefaces and Weights
 
In the example below, I’ve paired a serif font (Georgia), with a sans-serif font (Arial).
Example: Georgia and Arial
Headline
A short subtitle
 
‘System’ font pairs.
‘System’ fonts are pre-installed on a device’s operating system (Windows, Mac OSX, iOS etc.), and a small selection of these are recognised and displayed by most email and webmail clients. Android is the exception to the rule however, as it forces its own fonts, Droid Serif, Droid Sans and Droid Sans Mono on text, overriding any ‘system’ fonts that have been specified. Curiously though, the native Android email client seems to quite happily display ‘web’ fonts.
 
In the examples below, I’ve paired a selection of ‘system’ fonts that display on most email and webmail clients.
 
‘System’ Fonts:
 
Georgia
Paired with Arial, in this line of text.
 
Arial Bold
Paired with Georgia, in this line of text.
 
Times
Paired with Arial, in this line of text.
 
Trebuchet MS
Paired with Georgia, in this line of text.
 
Courier
Paired with Arial, in this line of text.
 
 
Type Anatomy
C.
Upper Case ‘C’
Font: Adobe Caslon Pro.
  1. Counter
  2. Finial
 
‘Web’ font and ‘System’ font pairs.
‘Web’ fonts are not pre-installed, and need to be linked to the email from the server where they are hosted, to be recognised and displayed by the email and webmail clients. Not all email and webmail clients support the use of ‘web’ fonts however, so alternative, fallback fonts need to be specified inside the font stack, which will then be displayed in the absence of ‘web’ font support. Here, Georgia is specified in the font stack as the fallback to the ‘web’ font, Fjord One:
 
<span style="font-family:Fjord One, Georgia, serif;">
 
To overcome Microsoft Outlook’s quirk of displaying Times instead of the specified fallback font, an alternative font stack needs to be added, omitting the ‘web’ font. This should be inserted within a Microsoft Conditional comment, so that it’s ignored by the other email and webmail clients, as follows:
 
<!--[if mso]><style type="text/css">.serifWebFont {font-family:Georgia, serif !important;}</style><![endif]-->
 
The CSS style name declared in the Microsoft Conditional comment (in this case .serifWebFont), should then be applied to the ‘web’ font. The fallback font will then display as expected:
 
<span class="serifWebFont" style="font-family:Fjord One, Georgia, serif;">Fjord One</span>
 
In the examples below, I’ve paired a selection of ‘web’ fonts with a selection of ‘system’ fonts.
 
‘Web’ Fonts and ‘System’ Fonts:
 
Fjord One
Paired with Arial, in this line of text.
 
Oswald
Paired with Times in this line of text, with .5px of letter-spacing.
 
EB Garamond
Paired with Arial, in this line of text.
 
Open Sans
Paired with Georgia, in this line of text.
 
 

Ultimately, the key to font pairing is contrast. Whether you use ‘system’ fonts, or a combination of ‘system’ fonts and ‘web’ fonts, ensure you keep that in mind. If you decide to use ‘web’ fonts in your email, specify fallback fonts that pair as well as your ‘web’ fonts. Finally, be aware of how Android overrides any ‘system’ fonts you’ve specified with its own serif, sans-serif and monospace fonts, and the fix for Microsoft Outlook’s fallback font quirk!

 
Type E: is an email newsletter devoted to typography on email, created by Email Designer and Developer, Paul Airy. Please email your thoughts, suggestions and questions to type-e@beyondtheenvelope.co.uk. Thank you for subscribing!
 

Beyond the Envelope™
© Paul Airy, 2015
+44 (0) 7962 177 477 (International)
07962 177 477 (UK)
Unsubscribe:
Please don’t make me cry! :(