Choosing Fonts · Page 5 of 7
Pair fonts for visual hierarchy
Most designs need two fonts: one to grab attention and one to be read. Pick two that are clearly different, then give each one a job.
Why pair fonts?
Visual hierarchy tells the reader what to look at first, second and third. A clear difference between the heading font and the body font makes that order obvious. If there isn’t enough contrast, the hierarchy breaks down and the roles you gave each font won’t be clear.
The Riverside Market
Fresh berries, sweet corn and warm bread from twenty local farms. Bring a bag and come early for the best picks.
FlatOne font at nearly one size. Nothing tells you where to start.
The Riverside Market
Open Saturdays
Fresh berries, sweet corn and warm bread from twenty local farms. Bring a bag and come early for the best picks.
Clear hierarchyA bold display serif for the heading and a quiet sans for the text. Your eye knows where to go.
Display type vs. text type
Some typefaces are built to be read in paragraphs. Others are built to be seen, big and briefly. The quirks that make a display face fun are exactly what make it tiring to read.
- Display face as text
Our spring workshop covers color, layout and type. Bring a sketchbook, a pencil and three examples of posters you love.
- Text face as text
Our spring workshop covers color, layout and type. Bring a sketchbook, a pencil and three examples of posters you love.
Keep display faces big and brief. Use them for headings, and switch to a calm, even text face for anything longer than a sentence.
Contrast, not conflict
Two fonts should be either clearly different or come from the same family. The trouble zone is the murky middle, where fonts are almost alike, and the opposite trap, where two loud fonts both demand attention.
The Riverside Market
Open Saturdays
Fresh berries, sweet corn and warm bread from twenty local farms. Bring a bag and come early for the best picks.
ContrastPlayfair Display + Source Sans 3. A dramatic serif and a calm sans, with similar proportions.
The Riverside Market
Open Saturdays
Fresh berries, sweet corn and warm bread from twenty local farms. Bring a bag and come early for the best picks.
MurkyEB Garamond + Libre Baskerville. Two traditional serifs that are almost the same. It looks like a mistake.
The Riverside Market
Open Saturdays
Fresh berries, sweet corn and warm bread from twenty local farms. Bring a bag and come early for the best picks.
ConflictAbril Fatface + Roboto Slab. Two heavy, attention-seeking faces that look mad at each other.
Rules of thumb for good pairs
Mix categories
A serif with a sans serif is the easiest contrast. Avoid two from the same category, like two scripts or two slabs, unless they are radically different.
Serif + sansGarden PartyDoors open at seven. Tickets at the gate.Two scriptsGarden PartyDoors open at seven. Tickets at the gate.Give each font one job
Decide which font is for headings and which is for text, then stick to it everywhere.
Same roles throughoutOur StoryFounded in 1998.Our MenuSeasonal and local.Roles keep changingOur StoryFounded in 1998.Our MenuSeasonal and local.Contrast size and weight
Make the size difference obvious. A heavy heading looks great against a lighter body font.
Big and bold over lightSpring SaleDoors open at seven. Tickets at the gate.Too close in size and weightSpring SaleDoors open at seven. Tickets at the gate.Match the bones
Look for similar x-heights and letter widths. Compare the letter o: round o’s and tall oval o’s rarely get along.
Round o + round oOoOoMontserrat + Merriweather: both wide and open.Tall oval + circleOoOoOswald + Montserrat: narrow next to wide.Pair a personality with a neutral
A distinctive heading font plus a calm, neutral text font is an easy winning recipe. Neither should steal the show.
Loud + calmJazz NightDoors open at seven. Tickets at the gate.Loud + loudJazz NightDoors open at seven. Tickets at the gate.Keep moods compatible
A light-hearted font and an all-business font will clash, even if their shapes work.
Both friendlyMaya’s 6th Birthday!Cake, games and a bounce house.Playful + formalMaya’s 6th Birthday!Cake, games and a bounce house.Stick to two typefaces
Use bold, italic and other weights within those two families for variety. If you need a third, use it in one tiny place, like a logo.
Two typefacesBake SaleSaturday, 9 a.m.All proceeds go to the library.Five typefacesBake SaleSaturday, 9 a.m.All proceeds go to thelibrary.See you there!Check the whole family
Your regular and bold may get along while the italics fight. Test every style you’ll actually use.
Test every styleLoraRegular Bold Italic Bold ItalicSource Sans 3Regular Bold Italic Bold ItalicDo the squint test
Squint at the page. The heading and text should blur to different shades of gray. If they look the same, change the weight, size or spacing.
Blurs to two graysSpring SaleDoors open at seven. Tickets at the gate. Doors open at seven. Tickets at the gate.Blurs to one graySpring SaleDoors open at seven. Tickets at the gate. Doors open at seven. Tickets at the gate.
A superfamily with many weights, like Montserrat ExtraBold for headings and Montserrat Regular for text, gives contrast with zero risk of a clash.
© Created by Sara Rosenstock, Marietta College Graphic Design.