Common design exercises like choosing a color palette or pairing fonts can go from simple to complex in the blink of an eye. While design is often a field full of rules and best practices, these are rarely hard and fast restrictions. More often than not, knowing the rules is just a stone’s throw away from breaking them.
In the case of pairing fonts, there are a few best practices to follow (or at least acknowledge) when getting started. Knowing these will get the ball rolling, even if you end up veering off-track down the road.
“Make sure your font choices reflect your brand’s values.”
What’s the difference?
First of all, let’s look at the different styles of typefaces and some common uses for each. This basic understanding of the categories will help establish a foundation upon which you can build your font palette.
The first major distinction is between serif and sans-serif typefaces. These are similar in style, but each has its own distinct finish. Sans-serif typefaces are composed of plain, simple lines (like Helevtica or Arial) while serif typefaces have slight projections that finish off strokes (like Times New Roman and Garamond).
Serif Fonts
Serifs are the small lines and hooks at the end of the strokes in some letters.
What font type do you use the most? pic.twitter.com/jOfH5xIACJ
— TheFutur (@thefuturishere) June 30, 2018
https://www.instagram.com/p/Bjj-gT3Bm99/
Related: Designers’ favorite typefaces
Serif typefaces are typically thought of as easier to read in print while sans-serif typefaces tend to work better in digitally rendered products (like websites and PDFs). Which style is best for your product will depend on its medium.
The other two major styles of typefaces are script and decorative. Script typefaces are styled to mimic handwriting or calligraphic writing and are often ornamented with flourishes or touches that make them feel a bit more unique.
Likewise, decorative typefaces are exceptional in that they often use unorthodox letter shapes and proportions to achieve distinctive results. This style can convey various moods and themes and are often consider much less formal that the other three typeface styles.
NEW: Inbox, a decorative display typeface offering new spin on the geometric sans genre: https://t.co/xdu7mWmwRs pic.twitter.com/MZP861A9uP
— Indian Type Foundry (@itfoundry) August 3, 2016
Script
Script typefaces use a flowing, cursive stroke.What is your go-to Script Typeface? pic.twitter.com/zlweWpzXKA
— TheFutur (@thefuturishere) July 2, 2018
Font pairing best practices
Most layouts look best when the designer chooses at least two fonts to set the text: one for the headline or title and the other for the body (or bulk) of the text on a page. By following (or selectively breaking) the rules that follow, you’ll set yourself up for a well-designed font pairing.
1. Limit your font palette to (in most situations) 3 fonts
While some projects will call for more elaborate font combinations, like when you’re designing a particularly decorative aesthetic, most layouts will benefit from restraint and forethought. If you do choose to use a variety of fonts, the overall effect should be harmonious without being conflicting or cluttered.
A good way to refine your font choices is to ensure that each font has a specific role or purpose in your design. If you can’t find a specific job for a font, it might be time to take a look at your choices.
2. Use contrast wherever possible to create a visual hierarchy
Qualities such as size, weight (or boldness), and spacing (including leading, the space between lines, and kerning, the space between letters) all play a role in how the viewer should navigate the page and what text should attract his or her attention first.
Decide what parts of your design are essential and which are less important
, and let your font choice reflect those priorities. More often than not, the more important a text element is, the larger and weightier its font will be.
3. Keep an eye on moods and history
This is where the process stops being technical and begins to get a bit more subjective. You’ll want to ensure that the moods evoked by your choices fit the intent of the project. An invitation to a child’s birthday party has a little more leeway when it comes to decorative fonts than does a professional resumé or a portfolio page.
You should also keep an eye on the genre or historical context of a font, particularly when designing a project with cultural leanings. Font styles can play a big role in cementing the overall look of your design, especially if you’re going for a certain aesthetic, so do some research and you’re more likely to find the pitch-perfect font choice.
“Ensure that each font has a specific role or purpose in your design.”
4. Understand your brand and know what you want to say
Are you designing a project that has a bit of personality? Or are you putting together a presentation for your company’s board of directors? Knowing what you want to say and the audience to whom you’re speaking is important for both content and presentation.
Likewise, if you’re designing materials for your brand, make sure your font choices reflect your brand’s values. A company like Airbnb or InVision can utilize a font with a bit more whimsy than, say, General Electric or IBM. Choose fonts that work with your existing branding and you’ll run a lower risk of sending mixed messages to your audience.
Related: How to describe typefaces
5. Trust your gut
The decision about whether or not two or more fonts complement each other can feel like something of a guessing game. You’ll often find yourself relying on instinct or a gut feeling. That’s ok. You’ve got this.
If you make a point of noticing how fonts combine well (or not) out in the real world—on products, in magazines, on websites, and in books—you’ll start to develop an innate sense for what works and what doesn’t.
Once you’ve got your font choices down, make sure to add them to your design system in InVision’s new Design System Manager. Don’t have a DSM account yet? Be sure to sign up today. Current DSM users, sign in below to take these new features for a spin.
More on typography
by Will Fanguy
Digital content wrangler | UX enthusiast | Recovering educator | Shameless nerd & GIF connoisseur | Hockey fan (Go Preds!) | Oxford comma or death | It’s pronounced FANG-ee
