Typography Combinations with Google Fonts
What exactly are Google Fonts?
Google Fonts launched in 2010 and is today the most popular Webfonts provider. Google Fonts is an interactive directory of free hosted web fonts released under the free software licenses SIL Open Font License 1.1, and Apache License. The fonts come from different designers and are so-called open-source fonts. Almost 700 fonts are now offered by the search engine giant. Google is hosting the fonts on there own servers. They are free of charge for commercial use. Free use on any website. In addition, the fonts are very easy to integrate. With a single line of code you have a huge selection of fonts available.
How to integrate Google Fonts on your website?
Here you can find the documentation how to to do it.
Getting started to use the Fonts API
10 golden rules you should use when combining fonts
Here you can find a very good article about the basics of combing fonts.
Read the blog post
Font combining resources
Check out these great resources to help you find pairings to make your website design look totally professional.
Try different fonts together with Web Font Blender, which allows you to choose a header, subheader, and body font. You can grab code from Font Blender to try the font combination in your browser.
With this nice tool you can select a font from the drop down list. Type Genius suggests a pairing based on professionally designed websites. It includes a lot of the Google fonts.
This website provides a long list of great pairings, sorted by font types. All of the text is editable, so you can paste in your own content.
Even placeholder text wants to produce nice effects. Our placeholder texts are unique, resource-saving and individual. Recycle your texts. Our service for you.
Some Font Combinations to check out
Feel free to switch up which font is the header and which is the body, trying different weights, italic and so on. Try them with the Web Font Blender.
Sans Serif + Serif
- EB Garamond + Quicksand
- Droid Sans + Droid Serif
- Ubuntu + Lora
- Roboto Condensed Bold + PT Serif
- Droid Serif+ Lato
- Bitter + Raleway
- Playfair Display + Muli
- Vollkorn Bold + Exo
Serif + Serif
- Playfair Display Extra Bold + Playfair Display Italic + Lora
- Quattrocento + Fanwood Text
- Bree Serif + Lora
Sans Serif + Sans Serif
- Oswald + Droid Sans
- Montserrat + Hind
- Oxygen + Source Sans Pro
- Raleway + Oswald + Open Sans
- Anton + Roboto
Decorative + Serif or Sans Serif
- Pacifico + Open Sans
- Sacramento + Alice
- Amatic SC + Josefin Sans
- Shadows into Light + Roboto
- Lobster + Cabin
- Vast Shadow + Oswald + Playfair Display
We made a infografic with some examples. Have fun trying out on your own.