Considerations when using multiple font faces (on webpage or CD cover)

I’m experimenting with fonts for learning purposes, and I noticed that using only one font type looks many times plain, but using more can easily make a mess out of my webpage and CD cover (these are the ones I’m experimenting with).

I have hard time finding the balance, so I’m curious if there is a rule of how many different fonts can I use, or what kind of fonts can balance each other.

I read the answers for Guidelines for logos using multiple typefaces , but I want to express two or more different things (like the formal/elegant mood of a music school and the feeling of a particular work of theirs) and I’m still stuck.


There is a certain depth that two well-paired type families lend to a design. Varying weight is good for certain applications but, as you note, it can fall flat if an International Style affect isn’t what you’re after.

The magic is in the pairing and their structured use.

Finding typographic soul mates

Pairing type is an art that comes with experience but it is not completely unscientific. You can check several areas to help guide your selection.

  • Proportion: Is it wide, squarish, short x-height, big dramatic caps?
  • Stress axis: Look at the o. How are the thick an thins oriented?
  • Personality: Are the shapes very open and friendly? Or tight, closed, austere?
  • History: With a little research, you may find fonts are related by history or even designer. Case in point, I commented recently on the appropriateness of Clarendon and Helvetica.

And don’t miss the fact that even well-paired faces may not match up in point size. The best way to find how the point sizes relate to check the x-height. I usually check at 10 or 100pt to make conversion easy: if Font 1 at 100pt matches Font 2 at 112pt my ratio is 1:1.12. So you multiply Font 1’s size by 1.12 to get a match in Font 2, or multiply Font 2’s size by .89 (1÷1.12) to get a match in Font 1.

There are certainly more data points to consider. Please do add anything I’ve missed in the comments.

Following the rules

The “rules”, of course, are entirely your own. You simply need to decide how you’ll use each of your type families and stick with it. A common practice is to decide that Font 1 will be used for headlines and Font 2 will be used in subheads, text, and captions.

With a complex type family (for instance, one with headline, text, and caption variants) you can mix that up a bit. You could try this standard arrangement:
Headlines: Serif font, “display” version
Subheads: Sanserif
Text: Serif font, standard version
Captions: Sanserif or Serif “caption” version

You can always just wing it, deciding between the two faces on a case by case basis. Unless you have really great intuition with type, that will probably end up in a mess. Not that rules can’t make mess too 😉

Fail fast, fail often

The only way you’re really going to get the hang of it is to start playing around. You’re going to make some bad decisions and you’re going to hate the pairings you end up with. Move on, try something new.

I often advise finding one really good anchor typeface. A font that you know is well-designed and flexible. If you need a freebie, try Merriweather on Google fonts. Google even helps you out with the “Pairings” tab, offering some quite nice suggestions. Play with those for a while and see what you think.

Further reading

Typophile has an excellent little wiki post linking to discussions on the site as well as an old U&lc article on the topic.

In one of the threads there, Stephen Coles made an excellent observation that goes against the rules:

This question often arises and I hope I don’t sound like a robot as my
answer is always the same: don’t worry so match about compatible
typefaces. Nearly any two types can work together. Pick typefaces that
fit your subject and audience. If they are right for the project, they
are right for each other.

An exception: when using two distinct typefaces within a single line
or paragraph, try to match general proportions (asc/descender length
and x-height). Or, pick a font suite.

There is also a great thread dealing with the very sticky issue of pairing two faces of the same general type without creating a conflict.

Source : Link , Question Author : Kuvik , Answer Author : Community

Leave a Comment