Perfect Font Pairings checklist
Make your website shine with some terrific typography combos.
There’s no denying the major role that font choice plays in the design of any website. It’s been several years now since Oliver Reichenstein shook up the tech world by claiming that, because 95% of the web is made up of written text, web design is 95% typography. And with the modern minimalist design trend taking us by storm, typography has become a main feature of many sites.
With the dawn of ultra-usable webfonts, it has never been simpler to tap into the power of typography to take your websites to the next level. But how do you wade through the ocean of webfonts and find exactly the right ones for YOUR site? Skillcrush senior designer Aisha Souto-Maior deals with this delicious dilemma every day, and she’s sharing her favorite combinations of FREE Google Webfonts with you here, along with her reasons for loving them.
And, if you need some guidance on how to make stunning selections like Aisha’s, just download the free “Perfect Font Pairings” checklist. And then go get designing!
1) Roboto Slab and Open Sans
To me this pairing reads as clean with a slight twist of character, I would use this combo on a site that needed a slight variation in font without causing too strong of a visual differentiation. Think: not your mama’s standard font pairing.
2) Raleway and Roboto
It can be tricky to pair two sans-serif fonts together that look different enough that it doesn’t look like a mistake and that work well together. Raleway has a nice character to it and Roboto works better in a smaller size for easy legibility.
3) Lora and Source Sans Pro
This font pairing is elegant and modern, Lora has all the elegance of a serif font without being too traditional and source sans pro is nicely legible on a small scale and provides contrast.
4) Merriweather and Open Sans
This pairing gives off an even stronger contrast than Lora and Source Sans Pro—since Open sans is an even lighter weight and Merriweather has harder lines then Lora—giving this combo a nice, modern touch. Serif can be modern when used correctly and in the right amount.
5) Dancing Script and Ledger
Script fonts can be hard to choose and it can be tricky to find the right pairing that looks just right and not kitschy. Dancing Script in the right amount can be used on more feminine sites—perhaps a clothing site or blog—and it pairs well with Ledger, which is very legible for body text and lends that more traditional flair.
6) Sansita One and Kameron
This pairing just makes me smile. It’s playful with a stronger character thanks to Sansita’s soft but chunky features. Kameron, while legible, also has a nice character that reads as a bit more playful and is a nice addition to Sansita One.
7) Quando and Judson
Ah, Quando, your “Q” just gets me. The Quando typeface just reads storytelling to me and works great on a product site for something literary. Judson again is a serif font with more character, that is softer. And its round O’s and curled C’s pair well with Quando’s quirky details.
8) Montserrat and Domine
For news sites that are going for a modern twist, it’s a great idea to have a strong sans-serif font for the headers and keep a serifed font for body text.
If all this talk of fonts leaves you fumbling in the dark, join the Skillcrush Web Designer Blueprint to brush up on all things typography—and much, much, much more!
Kelli is our Operations Manager here at Skillcrush. Plus, she's an early alum of Skillcrush 101 who made her career change into tech in her mid-40's! Kelli started with us as our Customer Support Manager and has also taken advanced web development classes and been an organizer in the Helsinki Rails Girls chapter.
In addition to helping the Skillcrush team and our wonderful students, Kelli loves podcasts (especially ones about tech, of course!), Corgis, emojis, and, most of all, catalan-style line dancing – as a true Texan living in Finland would!