10 Great Font Combinations from Google Web Fonts
New web fonts are added to Google Web Fonts very frequently and it’s important for us web designers to keep up with them. As of the time of writing this article, there are 622 free font families on Google Web Fonts. I have gone through most of the newest ones and compiled a list of 10 great font combinations that should be a good starting point for your blogs and websites.
Great Font Combinations from Google Web Fonts
Roboto and Fjalla One
Roboto for body copy and Fjalla One for the page heading turn out to be a great font combination. It’s tasteful, a little fun, yet professional. Roboto is Google’s-own sans-serif font created for the Ice Cream Sandwich version of the Android operating system. It’s available in 12 weights and there’s even a Roboto Condensed version with 6 weights.
Due to the informal nature of this font combination, it would best be suited for a magazine or personal blog, because it’s light-hearted, yet bold and modern.
Sintony and Libre Baskerville
Libre Baskerville is used here for the heading that sets a more formal tone to start with, and Sintony for the body copy lightens up the mood a bit. The font combination ends up being a little fun and a little formal.
It is a pretty versatile font combination and could be used for most blogs, especially academia-related blogs that need to look a bit authoritative, yet approachable.
Rambla and Sanchez
Sanchez is a slab-serif font used in the heading above, while the body copy is comprised of Rambla font. Slab-serif fonts can be very tricky to work with but I think this combination works because Sanchez is used sparingly and it isn’t overwhelming.
Rambla and Sanchez is another font combination that could be used for blogs, especially themed-ones. Some of Rambla’s letters have gothic characteristics, so that theme would be perfect for it.
Monda and Offside
This combination is very modern-tech with a bit of curve to it. Offside is the font used in the heading, although the font could very well be used in the body as well because it’s quite legible. I recommend using it as uppercase if it is used as a display typeface. The body copy is Monda and it works hand-in-hand with Offside.
As these two fonts create a tech-atmosphere, I would say they’d best be used on a tech website or a blog. Think Tech Crunch- or Gizmodo-like websites.
ABeeZee and Grand Hotel
ABeeZee is not a new font, but I felt like I had to include it here because it’s so versatile. It looks very quirky, but not to the point where it’s just ridiculous. It can work with almost any other font if chosen carefully. I chose Grand Hotel for the heading font here and I think it works beautifully. Grand Hotel is a cursive font that looks really cool if used appropriately.
Due to these two fonts looking very fun and quirky, it would really best be suited for a personal blog or a themed-website such as ice cream, soda, bakery, cake, etc.
ABeeZee and Patrick Hand SC
Here is another combination with ABeeZee. ABeeZee is again the body font, while Patrick Hand SC is the heading font. This combination definitely leans on the fun side and more specifically, appealing to younger demographic.
I would say this font combination would best work for a personal blog where it’s not followed or read by serious audience and where content is more personal.
Archivo Narrow and Mouse Memoirs
Archivo Narrow is the font used for body copy in this example. It is a condensed sans-serif font that needs to be a little larger to keep legibility. The heading font is Mouse Memoirs and it has a very humanistic quality because of the way baseline shifts for each letter.
This font combination could be used for almost any blog or website type. I would say it is slightly more appropriate for younger audiences though, just because of the nuances in the Mouse Memoirs font.
Domine and Fjalla One
In the above example, Fjalla One is used as the heading font again. The body font is Domine, which is a classical serif font with a taller x-height. The taller x-height is the reason it looks really crisp and legible even at smaller sizes. When you’re looking to use a serif font for your body copy, you need to make sure the font is large size (at last 16 pixels) or its x-height is tall.
This is a perfect font combination for a modern newspaper blog. The heading is a nice clean professional sans serif, while the body copy is a very legible serif. It’s tradition combined with modernism.
Domine and Libre Baskerville
I wanted to include a font combination that includes two serif fonts. If you go all-serif on your website, it tends to have a classical look, and that’s what some websites try to achieve. Using the previously used fonts Domine for body and Libre Baskerville for heading, we can notice the subtle differences between the two fonts, yet they work together pretty well.
This font combination reminds me a bit of New York Times. Nobody can look at it and say that doesn’t look like a newspaper.
Rambla and Mouse Memoirs
This is another fun font combination because it uses two fonts that are outside of the ordinary. Rambla, which is used for the body copy again, is very curvy and has longer stems on letters such as “f” which extend beyond the baseline. The heading font, Mouse Memoirs, also plays tricks with the baseline, as each letter is a different distance away from it.
As with the earlier usage of Mouse Memoirs, although it can be used for many different purposes, the target audience should be younger. It could be portrayed as not being very serious.
There you have it 10 awesome Google web font combinations that you can start using right away. If you have created some combinations of your own, post them in the comments for everyone to see.
To summarize the fonts used in the examples above, in the order of body font / heading font:
- Roboto / Fjalla One
- Sintony / Libre Baskerville
- Rambla / Sanchez
- Monda / Offside
- ABeeZee / Grand Hotel
- ABeeZee / Patrick Hand SC
- Archivo Narrow / Mouse Memoirs
- Domine / Fjalla One
- Domine / Libre Baskerville
- Rambla / Mouse Memoirs