When working with graphic design, one of the most overlooked aspects is the use of fonts. Every page you place online will have at least two fonts on it, one for headings and one for details under headings. For those who visit your website, little thought is given to the choices of font unless it is an obvious mismatch. In fact, your visitors will probably not even give a second thought to the font you use. Why is it important to consider whether two fonts pair well if fonts aren't consciously noticed?
The truth is that people will feel the discordance of mismatched fonts. They may not understand what is causing their discomfort, but they will feel it, and it may be powerful enough to make them leave your site. If you are not into graphic design, how can you create a font pairing that looks well enough that it doesn't trigger discontent in viewers? Read on for our hints.
The Bare Necessities
For now, we will stick to pairing two fonts. If you find the concept interesting, you may want to continue learning and consider how to make three fonts on one page look good. It isn't advisable to use more than three fonts at a time as the page then becomes too "busy." Here are some of the bare basics that can help make your font selection pleasing to both the eyes and the senses.
1. Pair a serif and a sans serif. For those of you who aren't really up on graphic design terms, serif fonts have extra lines, and sans serif is plain. For example, this is serif (notice the lines at the base of the "n"), and this is san serif (unadorned with no extra lines at the bottom of the "n").
2. Two fonts from the same category can cause conflict. Consider what it would be like if you chose two different script fonts at the same time. The contrast is not high enough to look appealing.
3. Try making it simple. Choose two different sizes of the same font. For example, you can use a 14 or 16 point font for titles and an 8 or 10 point of the same font for the body text.
4. Compare the uppercase "O." Try to pick two fonts that have either a circle-shaped "O" or an oval-shaped one. This sameness creates a harmony between two fonts.
5. Choose fonts that have comparable "x" heights. The two fonts will mesh in much the same way as the above "O" fonts.
6. Consider thickness. This can occur in two ways. The first way is too bold a font for titles and creates the body text with a standard version of the same font. Another way is to choose a font that offers a dark and light version. Both of these methods help create needed contrast.
7. Listen to your eyes. When your brain sees something that is "off" your eyes won't be able to stay focused in one area for long. If you find yourself feeling you need to look elsewhere as you are considering a particular pairing, then the two do not pair well.
8. Test both small and large blocks of text. One combination may look good when it is used in a large block of text but may appear too discordant when several small bodies of text are together. You want to make sure your fonts can pass both tests.
9. Consider font moods. Looking at fonts, you can get a sense of where they may be found. Elegant fonts don't pair well with humorous or fun fonts. This goes for all fonts - make sure the fonts you use all create the same emotion.
10. Trust your feelings. Does looking at the text allow you to read it without hesitation or are you finding something is distracting you? Try varying the text and see if that helps you focus on the content better. Trust your feelings and be willing to change things until your focus is on the content.
Sometimes it is easier to let someone else decide what fonts look good together. If you don't want to take the time to interrupt your graphic design flow, you can use this handy chart for a quick reference of some of the most popular fonts in use. For a visual example of some beautiful pairings, you can visit this page for inspiration. With enough time and practice, you will be able to feel the difference between a good and poor pairing.