Google Fonts Website Redesign

This week, Google updated the Google Fonts website and the design is a work of art. And it’s also exceptionally useful.

Back in 2010, Google created a service called Google Web Fonts, a directory of fonts with free licenses that use the Unicode character set. The current iteration, now simply called Google Fonts, offers 804 font families.

The new website design offers many ways to discover new fonts and displays fonts in several different ways.

Focus on a Particular Font

Each individual font is displayed by default using a random sentence at 40pt size in the “regular” weight.

gf01

Each of these elements can easily be altered by mousing over the example display and accessing specific display options. You can also type your own content to display.

gf03

For the entire page, four color backgrounds are available.

gf04

Focus on Font Categories

The left column allows a high level of specification in searching for fonts by attribute. Five font attributes are selected by checkbox including:

  • Serif
  • Sans Serif
  • Display
  • Handwriting
  • Monospace

Further refinement is then available using sliders to specify Thickness, Slant and Width.

 

A very interesting slider allows you to find fonts by number of styles in the font family. This option allows fonts to be displayed to show fonts with only one style to those with over 18 styles, for example:

  • Thin 100
  • Thin 100 Italic
  • Extra-Light 200
  • Extra-Light 200 Italic
  • Light 300
  • Light 300 Italic
  • Regular 400
  • Regular 400 Italic
  • Medium 500
  • Medium 500 Italic
  • Semi-Bold 600
  • Semi-Bold 600 Italic
  • Bold 700
  • Bold 700 Italic
  • Extra-Bold 800
  • Extra-Bold 800 Italic

Proof of Concept

For the purpose of using this site to discover fonts for a project, I present this example:

“I need a sans serif font for the body text that is light and thin, and a heavy serif display font for headers. I want the headers offered in several weights. It all needs to look good on a dark background.”

Here’s what I found:

gf06

gf07

Based upon these parameters, I discovered 2 fonts that meet my criteria and work in a design:

gf08

Merriweather bold for the headers and Yantramanav light for body text.

Leave a Reply

Your email address will not be published. Required fields are marked *