10 Useful Google Font Combinations for Your Next Site

——  Posted on July 13, 2013  ——

Designing with (Open Source) Type

Before @font-face and services like Google Fonts and Typekit, flexibility in web typography was fairly limited. We used background images or text replacement for headlines, and the body typeface was likely a plain, tried but true web safe font. Fast forward to today, and our options for rich typography on the web have greatly expanded.

google-fonts

Google Fonts has been my primary choice for web typography for a some time now. It’s fast, free, easy to use and open source. With a collection of over 600 fonts, we can be even more critical about the typefaces we choose for our projects.

Before we get to the fonts

These examples are 100% free for your use, modification and education. I wanted to make somewhat finished working examples in case some people want to just grab and go.

Try as many combinations as you can, even if they seem unconventional.

There are a lot of resources already available that cover more in-depth on how to combine fonts, and I may touch on that on another post, but for now I’ll just say that I haven’t found the golden rule to assure great font combinations. You want the fonts to feel like they go together thematically, but you don’t want them looking so similar that it causes conflict in your typography. Don’t put yourself in a box. Try as many combinations as you can, even if they seem unconventional. Just like in music, rules have been established and broken a thousand times over. It won’t always work, but it’s always a gratifying experience when it does.

Here is a selection of 10 font combinations using some trending and popular typefaces on Google Fonts.


1. Alegreya, Roboto Condensed, Roboto

alegreya-roboto

View Demo

HTML

					<link href="http://fonts.googleapis.com/css?family=Roboto|Roboto+Condensed|Alegreya:700" rel="stylesheet" type="text/css" />

CSS


h1 {
	font-family: 'Alegreya', serif;
	font-weight: 700;
	line-height: 46px;
	font-size: 46px;
	margin: 0 0 43px 0;
	}
h2 {
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: normal;
	font-size: 21px;
	line-height: 23px;
	text-transform: uppercase;
	letter-spacing: 2px;
	margin: 0 0 23px 0;
	}
p {
	font-family: 'Roboto', sans-serif;
	font-size: 15px;
	line-height: 23px;
	margin: 0 0 23px 0;
	}


2. Dancing Script, EB Garamond

ebgaramond-dancing

View Demo

HTML

					<link href="http://fonts.googleapis.com/css?family=Dancing+Script:700|EB+Garamond" rel="stylesheet" type="text/css" />

CSS

h1 {
	font-family: 'Dancing Script', cursive;
	font-weight: 700;
	line-height: 46px;
	font-size: 42px;
	margin: 0 0 23px 0;
	}
h2 {
	font-family: 'EB Garamond', serif;
	font-weight: normal;
	text-transform: uppercase;
	font-size: 18px;
	line-height: 23px;
	letter-spacing: 2px;
	margin: 0 0 23px 0;
	}
p {
	font-family: 'EB Garamond', serif;
	font-size: 16px;
	line-height: 23px;
	margin: 0 0 23px 0;
	}


3. Amatic SC, Josefin Sans

josefin-amatic

View Demo

HTML

					<link href="http://fonts.googleapis.com/css?family=Josefin+Sans:700|Amatic+SC:700" rel="stylesheet" type="text/css" />

CSS


h1 {
	font-family: 'Amatic SC', cursive;
	font-weight: 700;
	line-height: 46px;
	font-size: 46px;
	margin: 0 0 23px 0;
	}
p {
	font-family: 'Josefin Sans', sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 23px;
	margin: 0 0 23px 0;
	}


4. Oswald, Droid Serif

oswald-droid

View Demo

HTML

					<link href="http://fonts.googleapis.com/css?family=Oswald:700|Droid+Serif:400,700italic" rel="stylesheet" type="text/css" />

CSS

h1 {
	font-family: 'Oswald', sans-serif;
	font-weight: 700;
	line-height: 51px;
	font-size: 46px;
	text-transform: uppercase;
	margin: 0 0 23px 0;
	}
h2 {
	font-family: 'Droid Serif', serif;
	font-weight: 400;
	font-style: italic;
	font-size: 20px;
	line-height: 23px;
	margin: 0 0 23px 0;
	}
p {
	font-family: 'Droid Serif', serif;
	font-size: 15px;
	line-height: 23px;
	margin: 0 0 23px 0;
	}

5. Playfair Display, Alice

playfare-alice

View Demo

HTML

	<link href="http://fonts.googleapis.com/css?family=Alice|Playfair+Display:900" rel="stylesheet" type="text/css" />

CSS

h1 {
	font-family: 'Playfair Display', serif;
	font-weight: 900;
	line-height: 46px;
	font-size: 43px;
	margin: 0 0 23px 0;
	}
p {
	font-family: 'Alice', serif;
	font-size: 18px;
	font-weight: normal;
	line-height: 23px;
	margin: 0 0 23px 0;
	}

6. Dosis, Open Sans

dosis-opensans

View Demo

HTML

											<link href="http://fonts.googleapis.com/css?family=Open+Sans|Dosis:400,800" rel="stylesheet" type="text/css" />

CSS

h1 {
	font-family: 'Dosis', sans-serif;
	font-weight: 400;
	line-height: 46px;
	font-size: 40px;
	margin: 0 0 23px 0;
	}
h2 {
	font-family: 'Dosis', sans-serif;
	font-weight: 800;
	font-size: 18px;
	line-height: 23px;
	margin: 0 0 23px 0;
	}
p {
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	line-height: 23px;
	margin: 0 0 23px 0;
	}

7. Lato, Grand Hotel

lato-grand

View Demo

HTML

										<link href="http://fonts.googleapis.com/css?family=Lato:300|Grand+Hotel" rel="stylesheet" type="text/css" />

CSS

h1 {
	font-family: 'Lato', sans-serif;
	font-weight: 300;
	line-height: 46px;
	font-size: 46px;
	margin: 0 0 23px 0;
	}
h2 {
	font-family: 'Grand Hotel', cursive;
	font-weight: normal;
	font-size: 31px;
	line-height: 23px;
	margin: 0 0 23px 0;
	}
p {
	font-family: 'Lato', sans-serif;
	font-size: 16px;
	line-height: 23px;
	margin: 0 0 23px 0;
	}

8. Medula One, Abel

medula-abel

View Demo

HTML

					<link href="http://fonts.googleapis.com/css?family=Abel|Medula+One" rel="stylesheet" type="text/css" />

CSS

h1 {
	font-family: 'Medula One', cursive;
	font-weight: normal;
	line-height: 46px;
	font-size: 52px;
	margin: 0 0 23px 0;
	}
p {
	font-family: 'Abel', sans-serif;
	font-size: 17px;
	line-height: 23px;
	margin: 0 0 23px 0;
	}

9. Fjalla One, Cantarell

fjalla-cantarell

View Demo

HTML

				<link href="http://fonts.googleapis.com/css?family=Fjalla+One|Cantarell:400,400italic,700italic,700" rel="stylesheet" type="text/css" />

CSS

h1 {
	font-family: 'Fjalla One', sans-serif;
	font-weight: normal;
	text-transform: uppercase;
	line-height: 46px;
	font-size: 43px;
	margin: 0 0 23px 0;
	}
h2 {
	font-family: 'Cantarell', sans-serif;
	font-weight: 700;
	font-size: 20px;
	line-height: 23px;
	text-transform: uppercase;
	letter-spacing: -1px;
	margin: 0 0 23px 0;
	}
p {
	font-family: 'Cantarell', sans-serif;
	font-size: 17px;
	line-height: 23px;
	margin: 0 0 23px 0;
	}

10. Coustard Ultra, Leckerli One

coustard-leckerli

View Demo

HTML

				<link href="http://fonts.googleapis.com/css?family=Leckerli+One|Coustard:900" rel="stylesheet" type="text/css" />

CSS

h1 {
	font-family: 'Coustard', serif;
	font-weight: 900;
	line-height: 46px;
	font-size: 41px;
	margin: 0 0 23px 0;
	}
p {
	font-family: 'Leckerli One', cursive;
	font-size: 16px;
	font-weight: 400;
	line-height: 23px;
	margin: 0 0 23px 0;
	}

Conclusion

I hope you found some combinations you can use or got some inspiration for some of your own. Font combining is a fun and sometimes challenging task, but it’s a worthwhile endeavor. If you had a comment or want to share some of your own combinations, please feel free to hit me up on twitter!

  • bambicorro

    I love the combinations! Especially #2 Dancing Script, EB Garamond… thanks man!

  • deltadan79

    Best ones i’ve seen so far! thanks

  • Amit Kolambikar

    Awesome Post !! :-)

  • http://it.jeyjoo.com/ Mike Fitzpatrick

    Thanks. Some tidy combos there. Lato (also abeezee) contrast great with many fonts. I also like Roboto and Raleway a lot.

  • chris

    these are fantastic, thank you! too funny – i was already using #5! great minds, eh?

    • calebmcg

      Haha. Rad. ^_^

  • Joe Fitzsimmons

    I’m looking to re-style my site so I googled “Google font pairings” and ended up here. Just wanted to say this is a really nicely presented article! They are all great pairings and are presented in a very nice way. Thanks for the ideas.

    • calebmcg

      Thank you very much!

  • Leno

    you made my day

  • Sagar Munot

    Awesome Combinations..I am using DIY site builder. The only combination I can use is #4. DIY has other font options such as Dancing Script, Lato, Open Sans, Fjalla One but don’t have the respective combinations you have suggested. Can you suggest some other combinations with above fonts. Thanks !!

  • Jorge Zozaya

    osom!

  • http://digitup.se/ digitup

    Thank you for the combination. Gives a lot of inspiration.

  • http://8bitnerds.com/ Dave

    Thank you. I looked and kept seeing so so Google Font combinations but this post actually had good ones!

  • chevypowell

    Thank you soo much to take the time out to provide us with these collections

  • Tracy

    HOT COMBOS!!! woopwoop…i will use these in my daily workflow. You are a good designer.

  • http://onixmediadesign.com/ Victor Valencia

    Excelentes combos muy buenas y sirven de inspiración muchas gracias!!

  • pete preston

    Dude! Ths is awesome. I was thinking about asking how to make text to be cool, super-sized font.

  • Claire Turner

    Very useful article… thanks so much for taking the time to put this all together!

  • aravindbuddha

    Wow, dudu excellent.

  • Pingback: Where can I find some great Google Font combinations? | My Website

  • Steven D. Lawrence

    Great job of presenting these font pairings, Caleb. I appreiate the effort that you put into the examples to include the API links, the CSS and the overall stellar presentation. All together a very well drafted post. Thank you and kudos.

  • http://www.securitygem.com/ SecurityGem

    Awesome thanks for putting this together. Picking a font can be overwhelming.

  • cyborgspider

    Great job, great Empire of the Sun lyrics ;)

  • Pingback: The secrets of a successful web typography | Oficina da Marca

  • http://www.umairulhaque.com/ Umair Ulhaque

    Thanks for the entire useful demo along with HTML & CSS references. My favorite fonts combination was Dosis+Open Sans

  • Pingback: 3 Design Tips for an Attractive Subscription E-commerce Site | Cratejoy

  • janeltdesigns

    Thanks for the post, Caleb. Very helpful.

  • Pingback: Complete Guide to UX Resumes and a Free Template | Become a UX Designer

  • Nathan Wheeler

    Thanks Caleb. Very well done.

  • http://cesarvelandia.com César D. Velandia

    Beautiful post! Thank you.

  • Matt Kohn

    This rocks. Very helpful and great list.

  • yumaira

    great combination. Thank you!

  • Travis Wagner

    This is great. One thing though, the very first pairing preview seems to be incorrect. The capitalized letters that should be Roboto are actually a different font. The live demo shows it correctly, however.

  • http://eizu.deviantart.com Diana Santos “aka” Eizu

    I’m in love with your post!!!!!! Thanks for sharing!

  • Pingback: Let 2015 Be The Year Of Understanding Web Font Typography | Wordpress Hosting

  • Pingback: Let 2015 Be The Year Of Understanding Web Font Typography - WordPress Community | powered by Mpress Studios

  • Pingback: Let 2015 Be The Year Of Understanding Web Font Typography - Guiding WP

  • HannahHudson

    Thanks so much for the pairing suggestions and the beautiful little examples.

  • Rachael

    This was very helpful and beautifully done, thank you!

  • http://www.mzeassistant.eu/ Marzia Di Meo

    Veramente di aiuto! Grazie ;-) (translate: This article help me to choose a good combination for my website! Thanks from Italy!)

  • Ed Williams

    Absolutely in love with these. Thanks for sharing!

  • http://www.CopyMaven.net Stephanie McCready

    Lovely! This was immensely helpful!

  • Bhawna Joshi

    the best article ive ever seen on pairing .
    cheers mate !

  • http://seanvandenberg.com/ Sean Vandenberg

    Very nice selections. Thanks!

  • http://www.conqueror.ae/ Anne chen

    Old but gold post! Great selection indeed.

  • http://numentrik.blogspot.com Lukman Arsalan

    Thank you

  • gallowaygrumblefield

    Very helpful.

  • Alejandra Paredes

    HI!
    You made a really cool job. I’m new in coding and your post is really helpful. I only have one question: Do you know what happened with Josefin Sans? I put it in Google Font page and a Bummer message said they don’t have any Josefin Sans :( Do you know why?
    Thank you anyway!!
    Ale

  • http://www.androidnames.com AndroidNames

    I love #9 pair. I will use it for my next wordpress theme.