Considerations When Mixing Typefaces

A common technique in typesetting and design is to mix typefaces. This needs to be done with a bit of grace to ensure the addition of the second (or third) typeface doesn’t clash with the primary face of the work, and the design as a whole.

Perhaps most common is the pairing of a serif with a sanserif. One could be used to set headings whilst the other serves to set the body copy; or vice versa. Alternatively, one could set the content whilst the other is used for the user interface controls.

Generally the first concern is to account for sizing discrepancies between the glyphs. To describe how this problem arises, it’s useful noting how type design distinguishes “characters” from “glyphs”.

A character is the semantic representation whilst a glyph is a particular stylistic drawing of that character. So, the letter “a” is a character; the way your computer has rendered the letter “a” from the typeface Lucida Grande roman here makes it a glyph. Lucida Grande has a number of glyphs for the letter “a”: an italic, a roman bold, a bold italic, and so forth. In each case that “font” style has a different drawing for the letter; each a different glyph.

This leads onto the problem that can arise when mixing multiple typefaces: typefaces—even at the same set point sizes—vary optically in many ways. This means Helvetica set at 96pt will be quite different to Times New Roman, set at the same size.

Aligning x-heights

To ensure things don’t clash, especially when setting two faces in the same flowing text, is to begin by aligning the x-heights:

The x-height is the length spanning from the baseline, the invisible line letters rest on, to the common height of lowercase letters that don’t have an ascender (e.g. a, c, e, g, m, n, o, p, q, r, s, u, v, w, x, y, z — of which g, p, q, and y have descenders). This invisible line that marks the x-height is called the meanline.

We do this by simply taking our first typeface at a given size and style, and then upping or lowering the size of the second typeface until the x-heights align.

Stylistic Clashes

Having aligned the x-heights is just the first step, and often one I never bother doing if I feel the typefaces just clash stylistically. Here we need to account for a large range of factors:

• Stroke modulation (the varying thickness of the glyphs, particularly evident on serif italics).
• Angle of axes and the inherent slope in the face — it could be that everything is fine but the one italic slants in one direction whilst the second slants in the other direction.
• Serif styles (hairline or thick, terminal styles: lachrymal, beak, elliptical), or the lack thereof.
• Apertures, the openings of counters (see below).

That done, check the negative space — the space between and in-between the letters:

Having aligned the x-heights and paired, there could be other more directly visible eyesores, such as ones of weight:

Let’s have a look at a few more:

Notice the stylistic differences between Helvetica and Verdana? That’s primarily because Helvetica is a realist or neo-grotesque face while Verdana is a humanist face. (These are stylistic classifications used by type designers and typographers.)

Now imagine pairing a beautiful humanist serif face with a realist or worse yet geometric sanserif? They would be inherently at odds with one another, even with x-heights aligned (1):

Instead, select an adequate partner to your first face, in this situation the classical humanist Palatino and the highly legible and readable screen-optimized Verdana (2).

These two would be an ideal humanist combination for a screen-based typesetting project because both are fairly widely available, and both are very legible when rasterized on a screen.

Do you have any favourite combinations and pairings?