Fonts come in three basic types: serif, sans serif, and everything else. Many will call the last category script (also known as cursive, handwriting, or decorative).
Fonts also come in different weights (think bold or not bold, but with more nuance). Weights are indicated by name and also by a number code, which will be familiar to programmers. For example, Google’s highly versatile and highly popular font Open Sans comes in Light 300 all the way through Extra Bold 800.
To a true typographer, the task of combining fonts is an art form. (Despite the snobbishness, many of them are still loveable people.) Nevertheless, even a typography neophyte can successfully combine Google Fonts with the right tools!
Want to hear something great? Google suggests pairings for every one of the fonts in their collection. While Google does a good job with this feature, some of the combinations can be a little crazy. Take a moment to consider what you want these fonts to accomplish in your design (be it a website, blog, graphic, or print piece) both in function and in tone before making your final choices.
Check out these great resources to help you find pairings chosen by those snobby but wonderful designers to make your design look totally professional.
Quickly try different fonts together with Web Font Blender, which allows you to choose a header, subheader, and body font. Add in your own text if you like (just make sure you are choosing from the list of Google fonts rather than system fonts). You can grab code from Font Blender to try the font combination in your browser, or, if your website is powered by Church360 Unite, you can play with over 100(?) of the most popular Google fonts by adjusting Settings under Customize.
I love Type Genius where you can select a font from the drop down list. Type Genius suggests a pairing based on professionally designed websites. One downside of this site is that it does not include all of the Google fonts, just those for which it has a good example.
Get inspired by creative designs on Google Type where Aesop’s Fables have been captured in color, image, and perfect font choices.
Font Pair’s clean, simple website provides a long list of great pairings, sorted by font types (sans serif with serif combinations, serif/serif combinations, etc.) All of the text is editable, so you can type or paste in copy similar to what you would use on your site.
For all of the following, feel free to switch up which font is the header and which is the body, trying different weights, use all caps, maybe even throwing in italic once in a while. Try them out in Web Font Blender and see what works. Have fun!
What are your favorite Google Font combinations? Tell us about them in the comments!
Interested in more posts like this? Subscribe to the CTS Blog Technology & Your Ministry.