Google Battles to Overthrow the Type Tyrants

“Grumpy wizards make toxic brew for the evil Queen and Jack.”

If you used Google Fonts, you’d know exactly what that meant.

Back in 2011 Google Fonts, then known as Google Web Fonts, released a directory of 19 licensed fonts that ranged from serif and san serif fonts to script fonts. Google believed that everyone should have access to quality typography to improve both their online and offline presence. The birth of Google Fonts opened the doors to numerous designers and developers who were tired of using ‘standard,’ overused fonts like Arial, Helvetica and Georgia and were looking for something fresh.

Google Fonts aren’t complicated, in fact they are quite easy to use, regardless of your design or programming capabilities. Let’s break down exactly what this service is and how it benefits designers, developers and most importantly, your business.

What are Google Fonts?

Google Fonts allow designers, developers, marketers and business owners (everyone really) to sample hundreds of FREE fonts that can be used across a variety of media platforms such as web, print, and large format displays.

Through collaboration with designers around the world, Google has developed quality typefaces that are designed to be web-friendly. Because all of the fonts are Open Source, they are free for anyone to use and don’t require a purchasing agreement! (Can I get a woop woop?!)

Google has also provided a huge selection of fonts: everything from professional looking san serif to crazy script fonts. At the bottom of this post I discuss some of my favorite Google Fonts and highlight a few different businesses who use those fonts.

Let’s summarize:

• Google Fonts are FREE for anyone to use
• There is a huge selection of typefaces to choose from
• All Google Fonts are web-friendly
• You can download and use them like any other font, for all your marketing materials

How do Google Fonts benefit designers?

As a designer, I LOVE Google Fonts. Why? Because I just do! Seriously though, I can compress my love for Google Fonts into three words: selection, testability and diversity.

1. Selection

There are more fonts on Google than I have friends on Facebook. (Not surprising, I know.) Google Fonts has over 632 font families to choose from and they are all different! I can choose from the standard serif and san serif families, or I can experiment with display and handwritten fonts. I can also sift through the fonts by popularity, alphabetically or by what’s trending. Every time I come to Google Fonts I discover something new, which keeps my designs fresh and keeps me coming back for more.

2. Testability

Once I have collected a handful of fonts I think fit my current project, I have the ability to review the font. When reviewing a font, I can toggle between headline text and body copy. I can view all of the styles and characters associated with the font family or compare two fonts side-by-side; but best of all I can “test drive” the font.

With this option I have the ability to change the font family, the style (regular, bold, etc.), the size and even the word, letter and line spacing. I have complete control over the font and can dictate the look and feel without ever opening up a design or coding program. I can even experiment with these tools using my own content to check readability and visualize how it will appear on an actual website! Pretty neat, huh?

3. Diversity

Isn’t this the same thing as selection? Nope. When I use the word diversity I am talking about the ability to use the font throughout a variety of media. In the past, I, like many designers before me, had a hard time unifying the look and feel of fonts throughout a project because many fonts that were “print approved” were not compatible for the web.

Today it’s so easy. By using Google’s font library I am starting with a font that I know is web-friendly and carrying it through to my print layouts. I can now use one or two font families on a project instead of five or six (depending on the media), which gives my layouts a much more cohesive look and feel.

How do Google Fonts benefit developers?

At a glance, developers love Google Fonts because ALL the fonts are web-friendly, they have an easy-to-use API and the service is backed by Google. (Need I say more?)

In the past, if a designer selected a font that was not web-friendly developers would pull their hair out trying to convert the font to a usable web format. Google worked to make sure their fonts are compatible with the web from the start. This saves developers a lot of time and legwork when developing a website, which means they are a lot happier. (And trust me, this makes everyone a lot happier.)

Developers also love Google Fonts because of the quick, user-friendly API that allows them to grab the necessary code to inject into your website within seconds. Google also offers helpful tips on how the font will impact page load time and how to prevent slowness (in relation to the font) on your web pages.

Finally, developers (and designers, too!) can be certain that Google is going to stick around for a while and that they are going to continue to be on the forefront of producing quality, easy-to-use products.

How can my business benefit from using Google Fonts?

1. Google Fonts can be used for both your online AND offline presence.

This means that brands can now present a more unified user experience when interacting with the customer; fonts can be brought from the web into flyers, brochures, and business cards.

2. Google Fonts are free.

You no longer have to pay $600 to $1,000 for a font family that you will eventually abandon when you redevelop; no cost to you means more money in your pocket.

3. Your design & development team will love you for ever and ever.

No, seriously – we will.

Great Examples of Google Fonts in use

Enough chit-chat. Here are some examples of fonts that I enjoy:

Headline Fonts:

1. Open Sans

Description: The Gibbon site uses Open Sans for the main message and supporting sub message. This font is easy to read and very 2014.
See it in Action: http://marquee.by/
Google Fonts: http://www.google.com/fonts/specimen/Open+Sans

2. Merriweather

Description: Merriweather is a bold serif that is easy to read and is a great choice for headlines.
See it in Action: http://kickpoint.ca/
Google Fonts: http://www.google.com/fonts/specimen/Merriweather

3. Roboto Slab

Description: This font is very versatile and has been used in both the logo and the main headline. This font also pairs really nicely with Source Sans Pro, Open Sans or another san serif typeface.
See it in Action: http://www.toprecruitersecrets.com/
Google Fonts: http://www.google.com/fonts/specimen/Roboto+Slab

Sub Heading & Body Copy Fonts:

1. Source Sans Pro

Description: B-E-A-utiful! Source Sans Pro is a great choice for headlines or body copy font. This font is professional and is a great choice for any type of business.
See it in Action: http://scytale.pt/
Google Fonts: http://www.google.com/fonts/specimen/Source+Sans+Pro

2. Oswald

Description: This font family has many styles, which makes it a great font for headlines, callouts and even body copy.
See it in Action: http://whosyoursanta.ca/
Google Fonts: http://www.google.com/fonts/specimen/Oswald

3. Muli

Description: Muli is a simple yet super sophisticated typeface. This is definitely one of the fonts I will be exploring in 2014.
See it in Action: http://inkandspindle.com/
Google Fonts: http://www.google.com/fonts/specimen/Muli

You can find more breakdowns of some of the best Google Fonts at Design Instruct, which served as an inspiration for this (much shorter) list. 

Conclusion

Let me guess: you are still confused about that opening sentence, aren’t you? This sentence, or ‘pangram’, uses all of the letters of the alphabet so that users have a better understanding of what they can expect from a typeface. While Google Fonts gives you the ability to view your own example text, this is the default sentence you see when browsing for fonts.

If you are tired of type tyrants like Arial and Times New Roman dominating the look and feel of your website, then be sure to grab your designers and head over to Google Fonts today!