Web Designer Freelance Interview Question:

Tell me how to combine fonts? Which types of fonts work nicely together? How many different types is OK to use on a website?

Submitted by: Muhammad

Some fonts work together nicely and look good on the same page. To combine two fonts properly we need to look for similarities and differences between them (serifs, historic background, x-height, thickness, aperture, stroke contrast).

As a good general rule of thumb, two fonts work well together if they are either similar except for one important thing (analogous fonts), or if they're very different but have one thing in common to connect them (complementary fonts). It thing that is always good for the two fonts to have equal x-heights (the height of a lowercase "x" compared to the uppercase "X" of the same font-size) in common.

Combining fonts that look too similar should be avoided (like combining Helvetica with Lucida Grande or Arial with Verdana).

A few rules to create good combinations:

☛ Combine a serif with a sans-serif font, both of which have very similar x-height, stroke contrast (the difference between the thinnest and thickest parts of a character's lines) and aperture (how open or closed the characters are);

☛ Use contrasting thickness options of a single font; a light/thin version of a font is very different than its bold/black versions and the two versions work very nicely in combination;

☛ Some fonts are designed as families and work well with one another. Examples are Adobe's Myriad and Minion pair or Museo with Museo Sans and Adelle with Adelle Sans.

☛ When selecting fonts, it's important to keep in mind the context each will be used in. The headings or display font could be more lavish, exquisite and detailed, while the main copy should be a simpler font that is readable in smaller sizes.

☛ For most designs, one or two font families will suffice with a possible third used sparingly for very specific purposes.
Submitted by: Muhammad