Considerations When Mixing Typefaces

Tweet

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:

Slide 88 from Standards friendly web type: 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).

Slide 89 from Standards friendly web type: check for stylistic variation

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

Slide 90 from Standards friendly web type: negative space

Slide 91 from Standards friendly web type: negative space (2)

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

Slide 92 from Standards friendly web type: differences in weight

Let’s have a look at a few more:

Slide 93 from Standards friendly web type: differences in style

Slide 94 from Standards friendly web type: differences in style (2)

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

Slide 95 from Standards friendly web type: constrast serif and sanserif combinations

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?

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.facebook.com/people/Michael-Tuck/100000132621143 Michael Tuck

    Nicely done, Pascal. I’d expect no less from you. :)

  • http://gauravmishra.com/ Gaurav Mishra

    Very nicely explained. Love it!

  • Timothee

    Hello, I was expecting a bit more practical explanations on the stylistic differences. (like you did for the x-height) You point out different things to pay attention to, but I’m not sure what to do with that in the end.

    For example, you mention the different serif styles. But what should I do regarding that when pairing a serif font with a sans-serif one? By definition the latter wouldn’t have any serif to compare to.

    I imagine you’re suggesting to find fonts with similar weight, angles of axes and so on? Wouldn’t that make them too similar in the end?

    • http://klepas.org Simon Pascal Klein

      Hey Timothee,

      I figured stylistic pairings outside of the general recommendations to pair serifs and sanserifs which fall into the same broad categories (e.g. transitional, humanist, geometric, …) is probably the best advice to dish out for the widest audience.

      Of course as you noted further stylistic differences exist and ought to be recognized and considered, but I think they’re beyond the scope of the above article, and it’s a subject well covered by Martin Majoor, as linked above by thousand.

      I might write more on this in the future. (:

      —Pascal.

  • http://www.optimiseweb.co.uk/ Optimise Web

    @Timothee, isn’t that the whole point of the article. I agree with Simon, if you ignore his points on x-height, angles etc you are pairing fonts which clash visually. Weight however could possibly be ignored, to a certain extent, when creating headings or headlines, where differing weight creates a visual hierarchy.

  • http://twitter.com/theavangelist Andy Parker

    @Timothee, the core of any font is remarkably the same between serif and sans.

    In the last example you can see this between palatino linotype and verdana.
    Notice how kerning between the lead vertical stroke and the arching of the circle are virtually identical in both faces.

    The weight of both is similar also, usually serif fonts are lighter as they have more flourishes, but between these two the weight is comparible.

    Subltety is how you make things pop from the page. So yes, you should be looking for things that are similar as the slight variations are what will provide your visual impact.

    In contrast of course you can completely polarise for impact.

    Think of adverts by brands such as Coca Cola where their brand is heavily flourished, they will always use a heavy serif for the strapline, impact for example or even arial.

    It’s more about knowing what absolutely clashes rather than match making.

  • http://twitter.com/thousand thousand

    For those wanting to go more in depth with this, Martin Majoor has an excellent article talking his “Philosophy”. He writes in great detail about harmonies and his design principle using the “skeleton” of a font.

    http://www.martinmajoor.com/6_my_philosophy.html

    I’ve used the principles here and there frequently, and they can even be applied to paring very decorative display faces with text faces.