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.
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.
For the entire page, four color backgrounds are available.
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:
- Sans Serif
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:
Based upon these parameters, I discovered 2 fonts that meet my criteria and work in a design:
Merriweather bold for the headers and Yantramanav light for body text.