Courtesy of: Designmantic.com
Before we even begin to build a set of fonts for a web project, we need to know the different classifications of typefaces. They can be classified into 4 broad categories:
While similar to sans serif, it is made distinct from sans serif by “extensions” to its finishing. These typefaces are more suited for print due to its bold and strong quality.
Sans serif typefaces usually does better on screen media. Its clean simple lines creates stable and serious copy.
Decorative typeface is a novelty type. Different fonts can create different moods in design, with a classy and elegant quality. They are generally reserved for specific purposes, most effective in headlines at larger sizes.
Typefaces in this category can be a cursive or handwriting types. Characteristically soft, yet intense, script types can range from formal to whimsical. They should never be used in all caps, and are best for announcements, advertisements etc.
Combination 1 — sans + serif
For a classic combination: mix a serif type, with a sans serif type, usually, with serif types in body text, sans serif in headings.
Combination 2 — same yet different
Even when working with just 2 types, a distinct visual hierarchy can be established. Plan a strict hierarchy, and follow it. It helps when the types have multiple fonts and styles to choose from.
Combination 3 — insider knowledge
It pays to know the person behind the types! Typefaces from the same creator are likely to have similar aesthetics, which gives them a certain coherence, even if they were not made to complement each other.
Combination 4 — x-heights
Choose types with the same x-heights. Noticeably different x-heights causes undue stress to your readers, taking their attention away from the content, and focus on the type instead.
Even so, we should always take into consideration the personality of the fonts. While the combinations above work, they only work if the personality of each type do not clash. On the other hand, type should also have enough contrast to avoid them bleeding together into a chunk of text: use it to guide your reader’s eyes through the passage.
At the end of the day, the above are just tips that may help you decide when in a creative rut. It also pays to scrutinise the content being displayed. The types should be paired or grouped together to reflect the subject matter. When the above principles seem more hindrance than help, overrule.
Piktochart: 4 Things You Need to Know to Pair Fonts Well
Adobe: Typography Basics – Typeface Classifications
Smashing Magazine: Best practices of combining typefaces
Adobe: 8 Tips for Combining Typefaces