How to Combine Fonts for Your Web Project
Fonts have a major impact on how we interpret the words we read, and different typefaces can have different personalities. For example, Comic Sans is widely regarded as a friendly (even immature) font, whereas Times New Roman as sophisticated and trustworthy. Thanks to the Internet, a simple Google search for “web fonts” will return hundreds of thousands of results—so which font is best for you? In the words of Frere-Jones’ Nina Stössinger:
“Formulate a job description for the font. You don’t just want to hire anyone.”
Read on for a brief overview of font basics, pairing tips and resources to help you create an irresistible website.
Types of Fonts
First off, familiarize yourself with the four main types of fonts:
Serif: typefaces with details or decorations at the ends of some letters or numbers
Sans-serif: typefaces without details or flourishes
Script: typefaces with a personal touch, like calligraphy and handwriting fonts
Decorative: a very decorative or artistic script font (also known as display type)
Next, consider what kind of requirements your font(s) should fulfill. Instead of picking out fonts by what you think looks best, consider their practical uses first. First, consider the legibility of the font. Look at the kerning, or spacing around characters (especially between the letters “AV” and “AT”) to ensure that the letters are easily recognizable and don’t “bleed” into each other. Second, think about the content of the font. Is it available in the language you need? Are there enough special characters if you plan to use them?
To Pair, Or Not To Pair
Staying within one font family is a good way to ensure consistency in your web project. Roboto, for example, has a dozen different styles to play with. A good rule of thumb is to increase the size of the font the thinner or lighter you go. This will help maintain legibility.
Should you decide to use multiple fonts, try not to choose more than three. Choosing too many fonts for a project can be distracting to a viewer, making it difficult to get your point across. In addition, choosing too many fonts or styles can slow down the loading time of your web page.
Google Fonts is a great place to start your font search, and offers a great selection of web-friendly fonts. Or if you’re comfortable with HTML, Adobe Typekit offers a wider variety of fonts for a minimal fee. And for additional inspiration, head to http://chad.is/beautiful-web-type/ to see a collection of different font pairings from the Google Fonts directory.