December 22, 2018
Fonts are an essential aspect of design.
Choosing the "right" font can be a daunting task. Fonts can evoke emotion, create uniformity, and ultimately have a major role in your overall design. Understanding the different available options is the first step in pairing your fonts, so let's review some definitions.
- Serif - typefaces that include short lines or strokes at the ends of letters
- Examples: Times New Roman, Merriweather, Playfair Display
- Sans-Serif, Sans - typefaces without serifs
- Examples: Roboto, Oswald, Open Sans
- Display - typefaces intended for use in larger sizes, often embellished/complex designs
- Examples: Lobster Two, Special Elite, Cabin Sketch
- Handwriting - a variation of display fonts that replicate writing instruments like pens, pencils, brushes, markers, etc.
- Examples: Shadows Into Light, Permanent Marker, Sacramento
- Monospace - typefaces where each character occupies the same amount of space. These fonts are often used for coding.
- Examples: Roboto Mono, Kawkab Mono, Anonymous Pro
The use of too many fonts can be overwhelming and make it difficult for your site visitors to read your content. It is best to stick with no more than 2-3 complimentary fonts. Serif and Sans-Serif fonts are commonly paired together, where one is used for headings and the other for body paragraphs. You will also see pairings of Serif with Serif and Sans-Serif with Sans-Serif. If you choose to use more elaborate display fonts for your headings, it is best to use a simple font to pair with it, like a Sans-Serif.
Google Fonts is a great source for viewing font choices. It allows you to type your own test word or statement, offers search filters, and provides popular pairing options.