The life of a designer is a life of fight.
Fight against the ugliness. Just like a doctor fights against disease. For us, the visual disease is what we have around, and what we try to do is cure it somehow with design.
Massimo Vignelli Download Font PairView Roboto + Cabin on Google Fonts
Copy the CodeClick to open HTML + CSS
2 raleway light open sans regularIf I was influenced by anything, it was architecture.
Structure having to do with logic. If you don't do it right, the whole thing is going to cave in. In a certain sense, you can carry that to graphic design.
Paul Rand Download Font PairView Raleway + Open Sans on Google Fonts
Copy the CodeClick to open HTML + CSS
3 playfair display bold italic source sans regularDesign is the method of putting form and content together.
Design, just as art, has multiple definitions; there is no single definition. Design can be art. Design can be aesthetics. Design is so simple, that’s why it is so complicated.
Paul Rand Download Font PairView Playfair + Source Sans on Google Fonts
Copy the CodeClick to open HTML + CSS
4 roboto bold Lora regularSo what is design
all about?
So what is design all about? It [exists to] decrease the amount of vulgarity in the world ... to make the world a better place to be. It doesn’t have to be one style. We’re not talking about style, we’re talking about quality. Style is tangible, quality is intangible. I am talking about giving to everything that surrounds us a level of quality.
Massimo Vignelli Download Font PairView Roboto + Lora on Google Fonts
Copy the CodeClick to open HTML + CSS
5 abril fatface poppins lightMy adventure has all been in my mind.
My adventure has all been in my mind. The great adventure has been thinking. I love to think about things. I think that the lack of drama in my life has produced a platform for me to be fundamentally adventurous in my thinking.
Milton Glaser Download Font PairView Abril + Poppins on Google Fonts
Copy the CodeClick to open HTML + CSS
6 ruda regular Roboto SlabI don't think of design as a job.
I think of it as - and I hate to use this term for it - more of a calling. If you're just doing it because it's a nice job and you want to go home and do something else, then don't do it, because nobody needs what you're going to make.
Paula Scher Download Font PairView Ruda + Roboto Slab on Google Fonts
Copy the CodeClick to open HTML + CSS
7 cormorant garamond bold italic fira sans regularI want everything
we do to be beautiful.
I don't give a damn whether the client understands that that's worth anything, or that the client thinks it's worth anything, or whether it is worth anything. It's worth it to me. It's the way I want to live my life. I want to make beautiful things, even if nobody cares.
Saul Bass Download Font PairView Cormorant + Fira Sans on Google Fonts
Copy the CodeClick to open HTML + CSS
8 pt sans bold playfair display regularIt is very important to embrace failure and to do a lot of stuff.
As much stuff as possible — with as little fear as possible. It’s much, much better to wind up with a lot of crap having tried it than to overthink in the beginning and not do it.
Stefan Sagmeister Download Font PairView PT Sans + Playfair on Google Fonts
Copy the CodeClick to open HTML + CSS
9 Roboto light droid serif regularI’m a big believer in the emotion of design
and the message that’s sent before somebody begins to read, before they get the rest of the information; what is the emotional response they get to the product, to the story, to the painting - whatever it is.
David Carson Download Font PairView Roboto + Droid on Google Fonts
Copy the CodeClick to open HTML + CSS
10 oxygen light Noto serif regularKiddies, graphic design, if you wield it effectively, is Power.
Power to transmit ideas that change everything. Power that can destroy an entire race or save a nation from despair.
Chip Kidd Download Font PairView Oxygen + Noto on Google Fonts
Copy the CodeClick to open HTML + CSS
11 arvo regular lato regularYou have to utilize who you are in your work.
Nobody else can do that: nobody else can pull from your background, from your parents, your upbringing, your whole life experience.
David Carson Download Font PairView Arvo + Lato on Google Fonts
Copy the CodeClick to open HTML + CSS
12 lato italic catamaran regularThe words graphic designer, stick in
my throat
giving me a sense of limitation, of specialization within the specialty, of a relationship to society and form itself that is unsatisfactory and incomplete. This inadequate set of terms to describe an active life reveals only partially the still undefined nature of the designer.
Alvin Lustig Download Font PairView Lato + Catamaran on Google Fonts
Copy the CodeClick to open HTML + CSS
13 merri-merriweather weather regular muli lightGood design is a matter of discipline.
It starts by looking at the problem and collecting all the available information about it. If you understand the problem, you have the solution. It’s really more about logic than imagination.
Massimo Vignelli Download Font PairView Merriweather + Muli on Google Fonts
Copy the CodeClick to open HTML + CSS
14 PT sans italic bitter regularNo matter how many times your amazing, absolutely brilliant work is rejected
by the client, for whatever dopey, arbitrary reason, there is often another amazing, absolutely brilliant solution possible. Sometimes it’s even better.
Bob Gill Download Font PairView PT Sans + Bitter on Google Fonts
Copy the CodeClick to open HTML + CSS
15 cinzel bold fauna oneYou can set out to make a painting
but you can’t set out to make a great painting,” she said. “If you look at that blank canvas and say, ‘Now I’m going to create a masterpiece’—that’s just foolhardy. You just have to make the best painting you can, and if you’re lucky, people will get the message.
Susan Kare Download Font PairView Cinzel + Fauna on Google Fonts
Copy the CodeClick to open HTML + CSS
16 old standard tt rubik regularThe real issue is not talent
as an independent element, but talent in relationship to will, desire, and persistence. Talent without these things vanishes and even modest talent with those characteristics grows.
Milton Glaser Download Font PairView Old Standard + Rubik on Google Fonts
Copy the CodeClick to open HTML + CSS
17 work sans light open sans regularAsymmetry is the rhythmic expression of funtional design.
In addition to being more logical, asymmetry has the advantage that its complete appearance is far more optically effective than symmetry.
Jan Tschichold Download Font PairView Work Sans + Open Sans on Google Fonts
Copy the CodeClick to open HTML + CSS
18 questrial alegreya regularThe artist constructs a new symbol with
his brush.
This symbol is not a recognizable form of anything which is already finished, already made, already existing in the world - it is a symbol of a new world, which is being built upon and which exists by way of people.
El Lissitzky Download Font PairView Questrial + Alegreya on Google Fonts
Copy the CodeClick to open HTML + CSS
19 oswald regular quattro cento regularThe grid system is an aid, not a guarantee.
It permits a number of possible uses and each designer can look for a solution appropriate to his personal style. But one must learn how to use the grid; it is an art that requires practice.
Josef Müller-Brockmann Download Font PairView Oswald + Quattrocento on Google Fonts
Copy the CodeClick to open HTML + CSS
20 Nunito LiGHt pt sans regularI find going to bed & pulling imagination over my head often means waking up
with a solution to a design problem. That state of limbo, the time between sleeping and waking, seems to allow ideas to somehow outflank the sentinels of common sense. That’s when they can float to the surface.
Alan Fletcher Download Font PairView Nunito + PT Sans on Google Fonts
Copy the CodeClick to open HTML + CSS
21 unica one crimson text romanA logo doesn’t sell, it identifies.
A logo derives its meaning from the quality of the thing it symbolizes, not the other way around. A logo is less important than the product it signifies; what it means is more important than what it looks like.
Paul Rand Download Font PairView Unica + Crimson on Google Fonts
Copy the CodeClick to open HTML + CSS
22 julius sans one Monda regularDesigning is not a profession but an attitude.
Design is the organization of materials and processes in the most productive way, in a harmonious balance of all elements necessary for a certain function.
Laszlo Moholy-Nagy Download Font PairView Julius + Monda on Google Fonts
Copy the CodeClick to open HTML + CSS
23 varela round Noto serifIf you ever have the good fortune to create
a great advertising campaign, you will soon see another agency steal it. This is irritating, but don't let it worry you; nobody has ever built a brand by imitating somebody else's advertising.
David Ogilvy Download Font PairView Varela + Noto on Google Fonts
Copy the CodeClick to open HTML + CSS
24 vollkorn regular italic raleway mediumThe fun of being a designer is to do something original.
to make images that nobody’s ever seen before. And the only way you’re going to do that is to avoid what the culture tells you is good. There is no good. The good comes from what does the job.
Bob Gill Download Font PairView Vollkorn + Raleway on Google Fonts
Copy the CodeClick to open HTML + CSS
25 ovo regular quattro-quattrocento cento sans regualrThe public is more familiar with bad design than good design.
It is, in effect, conditioned to prefer bad design, because that is what it lives with. The new becomes threatening, the old reassuring.
Paul Rand Download Font PairView Ovo + Quattrocento on Google Fonts
Copy the CodeClick to open HTML + CSS
26 permanent marker overpass regularFailure is built into creativity.
The creative act involves this element of ‘newness’ and ‘experimentalism’, then one must expect and accept the possibility of failure.
Saul Bass Download Font PairView Permanent + Overpass on Google Fonts
Copy the CodeClick to open HTML + CSS
27 ubuntu bold Open sans regularYou have power as a designer
to change the relationship someone has with an object. Your challenge is to keep people looking. Build in those little details. To some people, they might mean a lot.
David Pearson Download Font PairView Ubuntu + Open Sans on Google Fonts
Copy the CodeClick to open HTML + CSS
28 source sans pro black Sintony regularIf you remember the shape of your spoon at lunch...
it has to be the wrong shape. The spoon and the letter are tools; one to take food from the bowl, the other to take information off the page... When it is a good design, the reader has to feel comfortable because the letter is both banal and beautiful.
Adrian Frutiger Download Font PairView Source Sans + Sintony on Google Fonts
Copy the CodeClick to open HTML + CSS
29 slabo regular Lora regularI like stuff designed by dead people.
The old designers. They always got it right because they didn't have to grow up with computers. All of the people that made the spoon and the dishes and the vacuum cleaner didn't have microprocessors and stuff. You could do a good design back then.
John Maeda Download Font PairView Slabo + Lora on Google Fonts
Copy the CodeClick to open HTML + CSS
30 rufina bold pt serif regularDesigning is a matter of concentration.
You go deep into what you want to do. It's about intensive research, really. The concentration is warm and intimate and like the fire inside the earth - intense but not distorted. You can go to a place, really feel it in your heart. It's actually a beautiful feeling.
Peter Zumthor Download Font PairView Rufina + PT Serif on Google Fonts
Copy the CodeClick to open HTML + CSS
31 dosis regular Titillium web regularThe most popular typefaces are the easiest to read
their popularity has made them disappear from conscious cognition. It becomes impossible to tell if they are easy to read because they are commonly used, or if they are commonly used because they are easy to read.
Zuzana Licko Download Font PairView Dosis + Titillium on Google Fonts
Copy the CodeClick to open HTML + CSS
32 oswald light esteban regularSo that is the design process or the creative process.
Start with a problem, forget the problem, the problem reveals itself or the solution reveals itself and then you reevaluate it. This is what you are doing all the time.
Paul Rand Download Font PairView Oswald + Esteban on Google Fonts
Copy the CodeClick to open HTML + CSS
33 playfair display Black source sans regularTwenty years from now you will be more disappointed
by the things that you didn’t do than by the ones you did do. So throw off the bowlines. Sail away from the safe harbor. Catch the trade winds in your sails. Explore. Dream. Discover.
Mark Twain Download Font PairView Playfair + Source Sans on Google Fonts
Copy the CodeClick to open HTML + CSS
34 libre baskerville bold nunito regularIf you don’t get your type warm it will be no use at all
for setting down warm human ideas ... By jickity, I'd like to make a type that fitted 1935 all right enough, but I'd like to make it warm - so full of blood and personality that it would jump at you.
William Addison Dwiggins Download Font PairView Libre + Nunito on Google Fonts
Copy the CodeClick to open HTML + CSS
35 catamaran semibold merri-merriweather weather sans lightWe are so obsessed with the Net and technology
that we forget the message... We imagine to be able to do anything, and our software helps us believe we can... But we must move beyond the ‘how’ to reconsider the ‘what’ and the ‘why’...
Neville Brody Download Font PairView Catamaran + Merriweather on Google Fonts
Copy the CodeClick to open HTML + CSS
36 bree serif alegreya regularMy work is play. And I play when I design.
I even looked it up in the dictionary, to make sure that I actually do that, and the definition of “play,” number one, was “engaging in a childlike activity or endeavor,” and number two was “gambling.” And I realize I do both when I’m designing.
Paula Scher Download Font PairView Bree + Alegreya on Google Fonts
Copy the CodeClick to open HTML + CSS
37 cardo regular libre franklin regularThe contributions that one makes
in typography, design, and art in general cannot be, and must not be measured on how much money is involved. That would lead to total chaos. The word itself (contribution) is to give to a common purpose.
Ed Benguiat Download Font PairView Cardo + Franklin on Google Fonts
Copy the CodeClick to open HTML + CSS
38 istok web regular italic average regularCreativity is essentially a lonely art. An even lonlier struggle.
To some a blessing. To others a curse. It is in reality the ability to reach inside yourself and drag forth from your very soul an idea.
Lou Dorfsman Download Font PairView Istok + Average on Google Fonts
Copy the CodeClick to open HTML + CSS
39 roboto Medium libre baskervilleA designer...has the true responsibility to give his audiences
not what they think they want, for this is almost invariably the usual, the accustomed, the obvious, and hence, the unspontaneous. Rather, he should provide that quality of thought and intuition which rejects the ineffectual commonplace for effectual originality.
Lester Beall Download Font PairView Roboto + Libre on Google Fonts
Copy the CodeClick to open HTML + CSS
40 goudy bookletter average sans regularThere should be no separation between spontaneous work
with an emotional tone and work directed by the intellect. Both are supplementary to each other and must be regarded as intimately connected. Discipline and freedom are thus to be seen as elements of equal weight, each partaking of the other.
Armin Hofmann Download Font PairView Goudy + Average Sans on Google Fonts
Copy the CodeClick to open HTML + CSS
41 Alfa slab one gentium book basicPerfect
typography
is certainly the most elusive of all arts. Sculpture in stone alone comes near it in obstinacy.
Jan Tschichold Download Font PairView Alfa Slab + Gentium on Google Fonts
Copy the CodeClick to open HTML + CSS
42 raleway light frank ruhl libreHaving no purpose is the function of art
Having no purpose is the function of art, so somebody else can look at it and ask a question. Design is different - you’re supposed to understand what’s going on. You can be delighted by it, intrigued by it, but you’re supposed to know it’s a hot dog stand.
Paula Scher Download Font PairView Raleway + Frank on Google Fonts
Copy the CodeClick to open HTML + CSS
43 Prata regular Lato regularI read once about the concepts of a lateral idea
and a vertical idea. If you dig a hole and it’s in the wrong place, digging it deeper isn’t going to help. The lateral idea is when you skip over and dig someplace else.
Seymour Chwast Download Font PairView Prata + Lato on Google Fonts
Copy the CodeClick to open HTML + CSS
44 shrikhand Fanwood textYou can say
“I love you,”
in Helvetica.
And you can say it with Helvetica Extra Light if you want to be really fancy. Or you can say it with the Extra Bold if it's really intensive and passionate, you know, and it might work.
Massimo Vignelli Download Font PairView Shrikhand + Fanwood on Google Fonts
Copy the CodeClick to open HTML + CSS
45 eczar semibold merri-merriweather weather regularI think it’s ultimately inhuman to only see things for their functionality.
We want things to be more than that. The desire for beauty is something that’s in us, and it’s not trivial.
Stefan Sagmeister Download Font PairView Eczar + Merriw. on Google Fonts
Copy the CodeClick to open HTML + CSS
46 chivo light crimson text romanJust because something is legible doesn’t mean it communicates
Just because something’s legible doesn’t means it communicates. More importantly, it doesn't mean it communicates the right thing. So, what is the message sent before somebody actually gets into the material? And I think that’s sometimes an overlooked area.
David Carson Download Font PairView Chivo + Crimson on Google Fonts
Copy the CodeClick to open HTML + CSS
47 patua one regular maven pro regularThe nature of process,
to one degree or another, involves failure.
You have at it. It doesn’t work. You keep pushing. It gets
better. But it’s not good. It gets worse. You got at it again.
Then you desperately stab at it, believing “this isn’t going to
work.” And it does!
View Patua + Maven on Google Fonts
Copy the CodeClick to open HTML + CSS
48 Rubik regular Karla regularAn electrician isn’t an opinion former, but a graphic designer is.
My argument is that all graphic designers hold high levels of responsibility in society. We take invisible ideas and make them tangible. That’s our job.
Neville Brody Download Font PairView Rubik + Karla on Google Fonts
Copy the CodeClick to open HTML + CSS
49 neuton regular Work Sans regularFind out what the next thing is that you can push,
that you can be ignorant about, that you can be arrogant about, that you can fail with, and that you can be a fool with. Because in the end, that's how you grow.
Paula Scher Download Font PairView Neuton + Work Sans on Google Fonts
Copy the CodeClick to open HTML + CSS
50 anton regular signika lightWhat I feel fortunate about is that I’m still astonished.
that things still amaze me. And I think that that's the great benefit of being in the arts, where the possibility for learning never disappears, where you basically have to admit you never learn it.
Milton Glaser Download Font PairView Anton + Signika on Google Fonts
Copy the CodeClick to open HTML + CSS
How this post came to be
I have to be honest - I love the concept of Google fonts, but I find the execution to always be somewhat... lacking. I don't know. 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.
A while ago, my partner and co-founder of Reliable, David Tendrich, challenged me to do something about it.
"Make Google fonts work," he said.
And so that's how this post was born.
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.
(By the way, we've made this entire collection of Google font pairings into a downloadable PDF that you can easily reference at any time. You should see a small yellow tab at the bottom of your screen - click that to download the post now!)
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 vise 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, 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
Finally, in line with the attitude shift I mentioned above, in going from "Google fonts don't work" to "Let's make them work" - 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 me to create.
I'd love to hear your thoughts, suggestions for other Google font pairs, questions, and more.
