Different Font Faces in same Web Application

Question

The context here is a web application delivered through the browser.

My question is: is it ever okay to have different font faces or a single application? To me it looks obvious but not egregious.

Answer 1

Yes, mixing different fonts and typography is perfectly fine, so long as it is done tastefully. My approach to mixing different fonts is to give each font a purpose or a voice. The App would have a particular voice and the fonts would correspond to its personality. While things requiring input from the user would have a different font/voice. Using that as a guideline can help making things consistent and help you keep track of all the typography being used.

Check out this tutorial by Hoefler & Frere-Jones Four Techniques for Combining Typefaces

Another good example of it in use by Mailchimp.

Answer 2

It's going to depend on which font faces you are using and in which context.

For example, having titles in a different font face to the main body text might be OK, as might using different a different font face for the menu/navigation or side bar of external links. In all these cases you are indicating that these elements are different to the main body of your site in some way.

However, having too many different font faces would be a bad thing.

Answer 3

There isn't a problem with just using multiple fonts on your site per-se, the issue will come with what you do with them, how you style them etc. Everything in moderation, and all that. Make sure you have a reason to go with multiple styles, and it's not just because you like certain fonts and can't decide which ones to go with so you end up using all of them.

There's a good article over at Noupe about mixing multiple fonts where they give you some tips as well as showing some example sites. Their top 7 tips should give you something to think over:

1. Pay attention to scale and proportion.
2. Unify fonts with color or style.
3. Pay attention to priority and emphasis of different fonts.
4. Avoid anything too similar.
5. Keep body text readable.
6. Don’t overlook different font styles.
7. Trust your instincts.

Answer 4

Different typefaces are okay within limits; a very common situation is to have a logo or header font in addition to a body copy font.

From Typography.com:

A clever way to combine typefaces with similar proportions is to assign each a different purpose, and to limit each to a specific range of sizes.

There's lots of Font Combination Resources out there which will help you get started, but the important thing is to remember each font should have a different purpose. Body copy should generally be easy to read at a smaller size, while header fonts might be something that's more ornate but is still readable because it's presented at a larger size.

Try to limit yourself to one or two fonts; your body copy (something simple and always readable) and maybe a header font with a slight bit more personality that's still readable at the size it's presented. Justify the use of each font; don't use different fonts for different areas of the site unless there is a legitimate need; different mood, different reading conditions ect.