Typography Helps a Design Look Readable
If 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 Contrast
Font 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 Interest
Medium.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.
We’ve curated a list of font styles that work well together so you can design interesting type lockups in minutes.
Download the cheatsheet
Facebook’s instant articles:
Why does it seem like these companies are creating a highly intentional set of fonts for readability on their platforms?
People are going to read longer. They’re also going to likely enjoy the experience of writing on their platform — instead of their blog or other publishing options because there’s a lack of quality in, whether they realize consciously or not, the typography. The feel…. The line-height, the visual hierarchy in the headlines and the overall cohesiveness of the experience.
The trick is to integrate that feeling into our designs and products.
By using contrasting fonts — for instance a very bold sans-serif font, a lighter sans-serif and a bold serif font we can create variety, if you balance this with weighing the attributes and similarities in the fonts to make sure they are not so far-flug that they appear hap-hazard you now have interest, but also a high-end feel.
So said more succinctly — fonts paired for interest should be:
- 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.
The largest heading is a slab-serif ChunkFive — bold and blue with a thick line under it, it obviously commands attention. The serif subheading Crimson Text Italic complements it, but also contrasts sharply stylistically, followed by the bolded Montserrat side-note and the Montserrat paragraph and link. Bonus: My Favorite Fonts on Creative Market
Being 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 FagenProducts 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@timbdesignmpls
View More Posts
3 Comments