Top 5 Recommended Google Font Combinations

It’s no secret that the days of custom web fonts have already begun. What started out by Typekit and Cufon is now being finished by Google.

There is a lot of buzz going on these days with web design and custom fonts – and more than likely you’ve seen some typography that you would die to use. Some of these are paid fonts, however, which you might want not want to spend money on.

Fortunately, there is Google Web Fonts … which has stepped in to make all of your miseries (like mine) go away.

Below are 5 examples of Google Font combinations we recommend using.

1. Roboto Slab and Roboto

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

2. Raleway and Merriweather

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

3. Lustria and Lato

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

4. Ubuntu and Lora

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

5. Quattrocento and Quattrocento Sans

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint cupidatat non proident, sunt in culpa qui deserunt mollit anim id est laborum.

Comments

  1. Lato is one of my new favorites — happy to see this on the list!

    & off to download a few new ones! thanks!

  2. Those are some nice combinations, Brian. Thanks for posting.

    Personally, I think Lora makes a nice font choice for headings when combined with a generic sans serif like Arial, which is what I am currently using on my personal site. But it looks great in the body with Ubuntu, as you ahve suggested. I particularly like your suggestion of Quattrocento combined with Quattrocento Sans. I may try that out.

  3. Ubuntu looks beautiful for content area and one more font that I use for Bold text is Paytone One.

  4. Thanks for this, Brian. I find your combination of Museo sans and proxima nova incredibly effective and clear. I presume you use something similar to Typekit or Cufon, do you?

  5. Good post – nice to see Google web font combos – there are so many it’s sometimes hard to choose!

    Unfortunately, almost all Google web fonts look terrible on Chrome in Windows.

  6. Thank you. Summarily added to my best web design related bookmarks list.

  7. I use custom fonts for like headers and meta data but not for the site text itself. Like content and all. I think it would slow the site down and I don’t want that. I could be wrong but… yea. Iuno… I’m not comfortable with it.

  8. Roboto Slab looks pretty cool!!!

  9. Ubuntu and Lora are Great . This post would be cool if images were been there!

  10. You have a good eye for typeface combos. I absolutely suck at choosing combinations.

    I see you’ve moved on from Oswald. I still like that one for post titles. Having said that the more I look at the Roboto Slab / Roboto duo the more I like it.

  11. Thanks for the tip of Raleway and Merriweather. I´ll be using that in the redesign of my own site that hopefully goes live at the end of the month if not earlier.

    Finding a good font combination for the breadtext and headers is usually the second part of where I hit my head as a designer. Open Sans and others are great but they´ve been used for so long now and you want to make some difference with each design.

    The other combination that I have a hard time finding is colors. Link colors? Blue? Orange? Nah those have been done to death so looking for new colors is hard but at the same time quite fun.

    Good fun article. I´ll be coming back here for more of this.

  12. This is a nice selection of fonts to choose from, I’m particularly fond of the Quattrocento and Quattrocento Sans combo – I think I’ll be using these soon!

  13. Brian, I’m always obsessing about fonts, so very glad you posted this. Of the above suggestions, I like Quattrocento and Quattrocento Sans best.

    Curious what font combinations you use on this site and CopyBlogger.

  14. Ubuntu and Lora – a nice and superb combination for websites.
    Great work sharing them here :)

  15. Like the Lustria and Lato combo – might use that on my next project.