While you could spend thousands of dollars on custom web design, Google Fonts offers a great alternative. With Google Fonts, you can feature stellar font choices on your church website and blog for free! Their library with 650 fonts lets web designers take designs to the next level without even dipping into the budget.
Font Basics
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.
How to Combine Fonts
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!
Start by learning the basics of combining fonts and take it to the next level with these infographics.
General notes:
- Font combinations are often called “pairings,” which is an important word to know as you search for possible suggestions out there
- Limit your choices to 2–3 fonts, one for headers, one for the body copy, and perhaps a third for subheaders
- Avoid using more than one decorative font, since they are difficult to pair, often difficult to read, and should not be over used.
- When combining two or three fonts in the same category, make sure they are different enough to provide contrast and interest without blending together
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.
Resources
Check out these great resources to help you find pairings chosen by those snobby but wonderful designers to make your design look totally professional.
Web Font Blender
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.
Type Genius
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.
Google Type
Get inspired by creative designs on Google Type where Aesop’s Fables have been captured in color, image, and perfect font choices.
Font Pair
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.
22 Combinations
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!
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
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.
