Exploring Web Typography – New Project Highlights Creativity + Google Fonts

Google Type - Web Fonts Typography ProjectIt’s (belated) ‘Things we Like Thursday’ again and this week I am taking a look at Google Type – a “Collaborative typography project using select passages from Aesop’s Fables set to Google Fonts”.

In days of yore, website typography was a thing of nightmares for designers. Your choices were few:

So many font choices!

So many font choices just a dropdown away – but remember, with great power comes great responsibility!

  • Choose from a limited selection of fonts that were commonly supported across browsers
  • Using a font stack that could allow your typography to appear different from computer to computer
  • Convert your typography into images to preserve the exact look as desired (Good luck with Search Engine Optimization!)

In recent years, however, with the adaptation of HTML5 @FontFace specification, there are many more options available to the modern web designer who cares to put thought into their typographic choices. While utilizing any font you have access to, across any format you desire, is still not a reality due to licensing issues, services such as Adobe Typekit and Google Fonts have made a world of difference in making beautiful typography accessible on the web.

Now that we have access to a wide variety of fonts, either for minimal cost (as with TypeKit), or for free (as with Google Fonts), the problem has become one of design complacency rather than technical capability. On many modern sites, built with a Content Management System such as WordPress, selecting font choices can be just a dropdown menu away – but to a real typesetting purist such choices are not to be taken lightly which is why I was enamored with Google Type.

Google Fonts + Careful Typesetting + Aesop’s Fables = Much Win

Google Type is a collaborative project launched by the 25×52 Initiative (which very well could itself be featured in Things We Like Thursday in the future) with the goal of highlighting the possibilities made possible by Google Fonts. This excerpt from the site provides the best explanation of why it was made:

“There are over 650 Google Fonts available for free. But, pairing typefaces isn’t easy and many of those fonts don’t work for typical websites. Part of the 25×52 initiative, this collaborative, ongoing project offers inspiration for using Google’s font library.”

The project is collaborative in nature – utilizing GitHub, a platform designed to allow designers and developers to work together on code, anyone is able to add to the project within a set of guidelines. One of which is that each chapter, or submission, must be taken from ÆSOP’S FABLES. Each contributor gets the chance to tell the story of their fable as they see fit, utilizing Google Fonts, and other tools available to web developers.

My Favorite Story

There are currently 20 stories published to Google Type, and if I had to pick a favorite, it would have to be “The Astronomer”. I love the font choice of Megrim for the title – the effect is logo-esque, very different. Beyond that the background combines imagery of the sky overlaid with illustrated constellations and a rotating star field. Together with a story of cosmic retribution, the effect is magic. Be sure to visit the actual Google Type page to experience the full effect!

The Astronomer - Aesop's Fable with awesome typography!

The fables themselves offer some awesome content matter – ranging from dark and moody “The Old Hound”, to playful “The Fox & the Grapes”, however the best part to me is how the typesetting choices are used to reinforce the mood of the fable – the form is enhancing the content. The choices that the designer made when contributing a story to this story (so meta!) become more than the sum of the component parts, elevating the fables to another level.

Typographic choices have the ability to enhance or detract from the message you are trying to present.

That in essence is what good typography can do – for a story, or even a brand. Type setting choices can either detract from or contribute to someone’s perception of your business or brand. Imagine, if you will, Apple suddenly decided to switch their font choices over to Comic Sans and Papyrus. It might hurt your brain too much to think about, so I took care of it for you:

Apple Watch avec Comic Sans

Apple’s streamlined design aesthetic is completely ruined with (always) inappropriate font choices. (Click to enlarge)

As is evident, font choices can make or break your messaging. The streamlined aesthetic that Apple is known for is ruined by inappropriate font choices. Comic Sans and Papyrus, fonts which should probably never be used again, are not only misaligned with the brand and message, but also each other. Professional designers know how to pair typefaces with message, medium, and, also importantly, each-other.

Want to Learn More?

Although I am personally a novice when it comes to type setting, I am eager to learn and have been investing some time in learning the basics. Thankfully there are many great resources available to learn more – Butterick’s Practical Typography, for example, makes a bold claim:

“…if you learn and fol­low these five ty­pog­ra­phy rules, you will be a bet­ter ty­pog­ra­pher than 95% of pro­fes­sional writ­ers and 70% of pro­fes­sional de­sign­ers.”

Much thanks to Phil, we do have a few portfolio items of which we can be proud of the typographic choices. Steel Forming Systems, for example, has a great combination of fonts with great design, and Gilmore Furniture’s type setting pairs particularly well with their brand and design aesthetic.

Things We Like Thursdays is a new series of posts from the team at Blue Sky Sessions where we will share something interesting we found, whether it is from our daily lives, research for a project, or on the hunt for inspiration.
Contrary to Phil’s hopes and dreams, my laptop did not self-immolate once Comic Sans MS and Papyrus were installed. That is not to say that no Macbook Pros were harmed during the production of the above demo.

Get a free website analysis - click here now!