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:

In the example below, I’ve paired a serif font (Georgia), with a sans-serif font (Arial).

Example: Georgia and Arial

HeadlineA 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:

GeorgiaPaired with Arial, in this line of text.

Arial BoldPaired with Georgia, in this line of text.

TimesPaired with Arial, in this line of text.

Trebuchet MSPaired with Georgia, in this line of text.

CourierPaired with Arial, in this line of text.

Type Anatomy

Upper Case ‘C’Font: Adobe Caslon Pro.

Counter

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:

In the examples below, I’ve paired a selection of ‘web’ fonts with a selection of ‘system’ fonts.

‘Web’ Fonts and ‘System’ Fonts:

Fjord OnePaired with Arial, in this line of text.

OswaldPaired with Times in this line of text, with .5px of letter-spacing.

EB GaramondPaired with Arial, in this line of text.

Open SansPaired 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!