How this post came to be
I love the concept of Google fonts, but I find the execution to always be somewhat lacking. When compared to classics like Futura, Bodoni, Garamond - even Helvetica - they just fall short, and I rarely, if ever, end up using them.
Can you relate?
Again, I love the concept of Google font pairings: the fast download of cool fonts (and even cute fonts) from their high-speed library is great, and has brought far more unique, web-friendly fonts and font pairs to the internet than ever before. They sort of broke us out of the standard web fonts and web-safe fonts we were all chained down to a few years back of Arial and Verdana and even the Times New Roman font (remember those days? Can you believe they were just a few short years ago?).
But because of that feeling of something "lacking" - I've stayed away from Google fonts. Until now.
I wanted to create the best font pairings Google has to offer that even high-end agency designers would be tempted to use. I wanted to assemble Google font pairs that even I would have trouble turning down.
So I combed through Google's vast library and tested hundreds of font combinations, from their most famous and top fonts like the Roboto font, Railway font, Montserrat font, Lato font, Oswald font, Lobster font, and more, to more obscure, funky ones you may have never even seen before this post.
The wonderful Rijks collection
It was also about this time that I came across the Rijks Museum's online art collection. In short, it's a beautiful collection of both classical and modern art that is 100% royalty-free and available for any use you'd like. (Can you say "aaaamazing?")
I took my favorite pieces from the Rijks collection and combined them with my Google font pairings to create a truly beautiful display of Google fonts that really work. We've also organized them by filters to help you find a font to fit that project you're working on right now. You'll find dozens of font pairings you can re-use time and time again for different clients and projects.
But that's not all!
I undertook one more challenge in this project: to express these font pairings through profound, time-tested quotes on design from world-renowned designers of all styles. So we have beauty in art, functionality in fonts, and wisdom in quotes.
If you too have had trouble finding great Google fonts and combinations, this might win you over to the Google Fonts Team like it won me over. Or maybe not! The beauty of design is that, at the end of the day, our own preferences and styles are what truly matter.
One last thing:
To help you find font pairings, we organized them in two ways: Style (Serif, Sans Serif, Both), and Mood (Any, Modern, Striking, Eccentric, Classic, Minimal, Neutral, Warm).
Here's a brief explanation of each of these moods:
Modern: Feels like it was made for the 21st century, and wouldn't make sense in any other period. Typically clean, more on the minimal side, and great for projects that require a more polished feel.
Striking: Impact. Boldness. Weight. These font pairs reach out and grab you and pull you into their message.
Eccentric: Quirky. Odd. Different. These fonts communicate uniqueness in various ways. Great for personal blogs, companies in a crowded marketplace that need to be set apart, and more.
Classic: These font combinations feel like they could have existed for generations. They're reminiscent of classic, time-tested and weathered fonts that last. Great for projects that need to project confidence, reliability, style.
Minimal: These minimal font pairings say so much, with a whisper. They almost try to blend into the background and get out of the way to help you more purely take in the message. Clean. Concise. Polished.
Neutral: Some brands are like the friendly local baker who greets everyone with a smile. Others are more professional, cerebral. These neutral fonts are more on the cerebral side - conveying professionalism and cleanliness above all else. Think Helvetica, but for Google fonts.
Warm: For brands who are the "friendly local baker," these fonts are for you. They convey heart, creativity, openness. They say, "Come talk to me, let's be friends." Great for brands that have that personal touch.
So there you have it!
Beautiful fonts and combinations from Google you can use to fuel your personal and client projects. They're completely web-safe fonts, and due to their vast use worldwide, I think it's safe to say Google fonts are the new standard web fonts.
I hope displaying them on top of various colors, with various beautiful works of art behind them, helped you envision how they might work in your projects. That was one of my biggest goals in creating this post.
An important lesson
That's actually a lesson that was greatly reinforced in me throughout this Google font quest - that how fonts are used are just as important, if not more so, than the fonts themselves.
I think often Google fonts are strewn across designs that are lacking the fundamentals of good design. They're the cool, hip thing to use - and as a result, so many people us them. But design is a spectrum ranging from bad to great, and as bell curves go, few designs are truly great.
By simple math, most designs using Google fonts need improvement. Perhaps that's where my initial bias against Google fonts came from. Design is something I take so seriously, and am so passionate about, that when I see bad or lazy design, it hurts. From seeing so much sub-par design riddled with Google fonts, I associated Google fonts with sub-par design.
A new perspective
But undertaking this challenge to create this collection forced me to see Google fonts from a new perspective. Namely, it forced me to throw away my previous conceptions and see them anew. When I did, I simply viewed them like I would anything else in a design - as an asset to be used and manipulated to achieve an end-goal.
When I had no choice but to make them work, I viewed them as something that actually "could" work. And that's where the creativity and magic began.
That leads me to another important lesson I became re-acquainted with in this process - that when we think something won't work, it won't work. And when we truly think it can, we really can make it work.
Strategies for choosing font pairs
I also wanted to talk about some of the strategies behind these Google font combinations to help you create even more of your own. Because while I have 50 here, I'm certain there are dozens more waiting to be made.
If you'll notice, there's a pattern to nearly every pair: The headline is very bold and impactful, and then the body font is very light and airy. This contrast creates a nice tension and context for the fonts. It makes it very interesting as you scroll. Our eyes and brains desire constant change and flux and small contrasts like this deliver.
Another reason the body fonts are very light and airy is that they have to be palatable and legible to the eye over the course of a long piece of text. If I throw a bold, impactful font at you for more than 10 or so words - your eye will go crazy. It's like talking on the phone with someone who only screams.
When you go from a louder headline font to a body font, there's almost a feeling of relief. The headline was a nice, momentary burst of excitement - but then the eye is relieved to handle something easier and less demanding.
Serif & Sans
In addition, still in line with that concept of contrast, I often paired a serif headline with a sans serif body or vice versa. Again, this just emphasizes contrast and keeps things interesting.
It also takes things a step further and shifts the feel. Serif fonts tend to feel more grounded, conservative, and calm. Sans serif fonts tend to feel more modern, daring, and progressive. By paring the two together, you get a great balance that's interesting to the mind and the eye.
Work with what you (don't) love
I purposefully chose some fonts I simply thought I'd never like or want to use in any context. If I looked at a font and felt like it was a "heck no" - I felt compelled to give it a try.
This is so important for the creative process. Often, without even realizing it, we confine ourselves to our creative comfort zones, which slowly shrink over time. But when we step outside and try something we thought we'd never like - we often have our biggest breakthroughs.
Thanks so much for viewing this collection.
I hope it's as useful and enjoyable for you as it was fulfilling for us to create.
Who is Reliable
Have you ever found yourself in need of someone to convert a design to HTML? We'd love to help! Reliable is a coding company created by creatives, for creatives. We help hundreds of agencies each year by bringing their designs to life through code. We’ve been able to give our customers memorable, positive experiences and a sense of camaraderie they hadn’t experienced before with a design to HTML and WordPress development partner. Many of our clients become our friends. Our high-precision coders and testers will fill your project with beautiful code that works exactly how it ought to. No more long lists of changes that take months to resolve. Reach out to us and start the convo today.
