For those of you who feel less than skilled when it comes to visual design, typography is your secret weapon.
Typography is a surprisingly easy way to create lots of visual appeal and add that extra polish to your work without having to learn all about page layout and graphic design.
If you spend any amount of time trying to learn about typography, you’ll notice it’s a much debated topic among design professionals (designers can be quite an opinionated group)!
Don't let this scare you away.
In this tutorial post, we're going to give you the basic principals you need to understand how to pair different fonts and some examples pairings to get you started. While most tutorials cover way too much information about the history and minutiae of a particular font, we know all that information isn’t useful or actionable when it comes to designing your book.
When it comes to typography, it need not be complicated.
Book Fonts & Pairings Simplified
Here’s what you need to know:
For our purposes, you’re going to think about fonts in two different categories: text and display.
Text fonts are for larger chunks of text like the body of your book. The goal is readability above all else.
The two basic choices for text font are serif and sans-serif.
Serif fonts have little serifs, or tails, on them as you can see in the top half of the image image to your left.
- Serif fonts are often considered better used for body copy, as the serifs act as trails or pointers that lead the eye from character to character. This can reduce eye strain and make the reading a little smoother.
Sans-serif fonts (“sans” meaning “without”) do not have the tails.
- Sans-serif fonts can also work well for body copy, but because they lack the serifs, they often appear to be closer to together. This, if not done well, can make for eye strain and tough reading. So generally the sans-serif fonts are bumped up in size a bit, to increase legibility.
Personally, I find that as long as the font size is adequate, serif and sans-serif fonts work equally well and the choice comes down to preference.
Display fonts are what you will use for chapter and section titles, headlines, block quotes, and any other type of text you’d like to draw attention to within your work. The goal is to evoke a feeling and add visual interest to the page.
Display fonts are usually larger than regular text, more decorative, shorter in sentence length, and/or colored.
Generally speaking, your options here are endless. We’ll go over a few suggestions in the pairing section below.
The easiest way to avoid amateur mistakes is to pick one of three strategies:
Strategy 1: Pick one text font and use it for everything
Some text font families are extremely versatile because they include lots of different weights.
What is a weight?
Weight refers to how heavy or light the text will appear. This basically means “thickness” and can include labels such as: hairline, thin, light, medium, regular, semibold, bold, heavy, black, and ultra. The image to the right shows an example of Helvetica Neue in various different weights.
This is an excellent way to avoid the fear of pairing two fonts that don’t match. The font is the same (and therefore will certainly match), you’re just using a larger size and/or different weight for your display font.
Strategy 2: Choose a font family with a serif and a sans serif; use one for the display and one for text
This is another easy strategy to avoid the fear of pairing the wrong fonts. Again, because they are the same family, they most certainly match. Choose the sans-serif for the display font and the serif for the text font.
Or the other way around. Whichever you prefer, both work perfectly well.
Strategy 3: Pick one display font and one text font
Use one display font for all your chapter titles, headlines, block quotes etc. and your text font for everything else. Make use of italics to diversify your text font for example, captions under images.
So how do you know if two fonts go together?
The truth is, there are no hard and fast rules about combining fonts, which makes the process of pairing them time-consuming and maybe even a little exhausting. Instead, just avoid the following blunders and you’ll likely pick a winning combination:
Pick two different fonts (i.e. they shouldn’t look “similar”)
Using two similar fonts is a waste and can make your design look amateur built. Why use two similar fonts, when one font will do? If you take to two-font path, make it count!
Don’t use two highly decorative fonts
Remember the goals of each type of font (display vs. text). The goal of text font is readability, while the goal of the display font is to stand out. It can’t stand out if it’s competing with a decorative text font. This will not only make your design look amateurish, it will look cluttered and illegible as well. Stick to one decorative font and one text font!
Can you read one more easily than the other?
If you can’t read it, it doesn’t matter. First try bumping up the size a bit. Next, try playing with the font weight. Still can’t read it? Then get rid of it and try something new. A great way to test this is to try squinting at the screen. Can you see a visual hierarchy?