Typographic Contrast and How to Pair Fonts for Interest
Typography Helps a Design Look ReadableIf typography looks sloppy, the interface or design feels unprofessional. If the design looks unprofessional, what does that say about the company or organization it represents? Because customers can’t always see the product or service that the website or print publication is representing, they have to make guesses. Guesses based on the look and feel of the website, on your photography, reviews, badges, and what is visible. And what takes up much of the page? Content – using typography. Do they consciously think to themselves “this font pairing looks disjointed, therefore I think this company may be unprofessional”? Maybe not, but I promise you that it still affects their decision-making process subconsciously. What about if you have a classy – very intentional and considered font pairing that grabs people’s attention and is readable and legible? They’re more likely to read the content and associate the high-end feel with your brand.
Typographic ContrastFont pairing is like color theory in that if you take two colors just a shade off from each other, the combination can look unintentional and thus unprofessional. Make sure to choose fonts that are different enough to complement each other, without looking like they’re fraternal (not identical) twins. Here’s an example of that. Are both the headline font (Surveyor Display Black) and the sub-headline font (Baskerville Bold) classy fonts? Yes! But the problem comes when an undiscerning eye might just perceive them as similar, which causes a connotation of messiness. What would be better? How about a pairing of a big blocky san-serif font (Brandon Grotesque) as the main headline and keeping the serif Baskerville in place as the sub-headline?
How Many Fonts Should I Use?You don’t need to limit fonts to two, but make sure you can master using two before moving to three and so on. Veteran designers can wield ten fonts and still manage to make their designs look exquisite, but if you are just starting out, my suggestion is to limit yourself to two fonts until you really start to master this art – and then move on to three and master that. Utilizing fonts is kind of like juggling, if you don’t know how to juggle two you won’t be able to juggle three, and using six is going to be a disaster. Similar to juggling as well, there are a lot of designers that can juggle three, but very few who can make using six look effortless.
Pairing Fonts for InterestMedium.com has long been a advocate of clean readable typography, and social networks like LinkedIn and Facebook have since improved the typography for people writing and reading articles on their platforms. Perhaps these sites were inspired by Medium’s very intentional approach, or at least ‘downwind’ from it.
- Similar enough in certain attributes as to feel related.
- Different enough in classification (serif, sans-serif, script, display, etc), size and weight to provide sufficient contrast.
Bonus: My Favorite Fonts on Creative MarketBeing that I care so much about typography, naturally I’ve had the chance to browse and find some excellent fonts on Creative Market. I thought I’d share a few of my favorites, that will be sure to grab people’s attention, when used tastefully: Mentari – by Surotype Twilight Script – by Get Studio Yonder – by Hustle Supply Company Greycliff – by Connary Fagen
Products Seen In This Post:
We've curated a list of font styles that work well together so you can design interesting type lockups in minutes.Download the cheatsheet
Tim Brown is a Minneapolis web designer obsessed with typography, creating websites with a high-end feel and focused on the disciplines of driving traffic and conversion. You can tweet him at@timbdesignmplsView More Posts