Tara Hall

design. write.

Contact me at
hello@TaraHall.me

Jun 29, 2016

File under:

Google Fonts gets a redesign. Finally.

If you’re not familiar with Google Fonts, it’s a catalog of free, open source web fonts that you can use on your website. At last count, Google Fonts had more than 800 font families available.

Because it costs nothing to use and because of the number of high quality fonts offered, Google Fonts has been my go-to resource for web fonts since I began using it three years ago. I use Google Fonts often not only on the sites that I design, but also on my own website.

Since it’s launch in 2010, Google Fonts has had nearly the same website design until earlier this month, when the site underwent a major overhaul.

Previous design of Google Fonts website
Previous version of Google Fonts
Updated design of Google Fonts website
New version of Google Fonts from June 2016

Color and layout

The redesigned site has a more modern look and feel due in part to a new color scheme. Google removed much of the gray from the previous design, giving the new design a cleaner, less boxy appearance.

Google also replaced the blue used in the earlier design with a dark pink that aligns with today’s flat UI color schemes. Although the default background color is white, Google Fonts allows you to choose from three other background colors: black, blue, or yellow.

In addition to the color change, Google updated the layout of the site. Using four columns, the new site shows more fonts choices at once than the previous design, which used a single column format to display fonts (two columns if you include the search and filter options). Despite the increased number of columns, however, the site maintains a minimalist feel with plenty of white space.

The new Google Fonts is a beautiful example of how a site based solely on text with virtually no images can still look visually appealing.

Preview text

If you use preview text to compare two or more fonts, then you probably noticed that the preview text box that appears at the top of the page in the previous design is no longer there in the new design. The feature still exists, but isn’t as easy to find as it once was.

If you want to preview text across more than one font, select the default preview text in one font example, type your preview text, change the font size if you like, and then click the Apply to All link that appears below the text. Your preview text as well as your new font size will appear on all examples shown.

Selecting a font to use

In the earlier design, if you wanted to select a font to use, you clicked the Add to Collection button. I never found the button text intuitive because the idea of a collection wasn’t immediately obvious to me particularly when I wanted only one font and not a collection of fonts.

I’m not convinced that the new design has improved much on that issue. While the Add to Collection button no longer exists, it’s been replaced with a plus (+) sign icon instead. When you mouseover the icon, the tooltip text “Select this font” appears, which probably should have been used for the button text previously.

The primary problem that I have with the plus sign icon is its typically used to expand a section. I expect more options to appear when I click it.

Search and filter options

The older Google Fonts design listed search and filter options on the left side of the screen, but the new design moved the search bar and filter options to the right side of the screen.

I’m curious to know what Jakob Nielsen, usability expert, and his team at the Nielsen Norman Group have to say about this change. Though moving a page element from the left to the right may seem insignificant, it can, in fact, have some unintended consequences.

Read their article, “Website Logo Placement for Maximum Brand Recall” for a study in which brand logos were moved from the top left of the top right of web pages to learn more.

Unlike the previous design in which the search and filter options are always shown in the left column, the new design allows you to hide both by clicking the right arrow icon.

I clicked the right arrow icon, and quickly found that I didn’t know how to show the search and filter options. Though a right arrow icon lets you hide both, no left arrow icon replaces it to let you show the options again.

Instead, you have to click the Search icon (a magnifying glass) to return both the filter options and search bar. I was expecting that the Search icon to show only the search bar, but admittedly, it makes sense that it would show the filter options as well.

However, I wonder if a left arrow icon may be more intuitive because we expect some icons to work in pairs like plus and minus signs to indicate expand and collapse or up and down arrows, for instance.

Specimens

A specimen tells you more about a font. It shows a complete alphabet of upper and lower case letters, numerals and punctuation, and the different styles available, such as bold, italic, and regular.

Google Font specimens include the designer(s) and tell you a little about the font. These specimens also provide a handy guide to pairing the font with other Google fonts.

In the previous version of Google Fonts, I found it difficult to locate the specimens, but in the new version of the site, there is a See Specimen link that appears when you mouseover a font.

Google Font specimen for Amatica SC

What’s new?

I didn’t find many new features in the updated Google Fonts site with one exception. The Featured page on the new Google Fonts didn’t exist in the previous version—at least not that I could find, but it may have been well hidden.

The Featured page shows collections of fonts in specific categories, such as headline-worthy serifs. I also found a collection of perfect pairings or fonts that go well together assembled by Colophon, a type foundry.

I assume this new page is one that will change from time to time to feature new collections of fonts especially as the catalog grows.

Using the new Google Fonts

If you used Google Fonts in the past, then you’ll find using this new site a little different. As I mentioned earlier, there’s no longer an Add to Collection button. In addition, you won’t find Choose, Review, and Use buttons either.

To use the new site, locate the font that you want, and then click the plus sign icon beside the font name. At the bottom of your screen, you’ll see a new message bar: 1 Family Selected.

Click the minus sign on the message bar (I suppose it’s coincidence that it looks like a minus sign because those are typically used to collapse a section. Maybe an up arrow would have been better.)

A pop-up window opens showing you the selected font, the HTML, and the CSS needed to use the font on your own website.

Google Fonts font selection pop-up window

The Customize link provides additional options, assuming any are available for your selected font. For the font that I chose as an example (Amatica SC), I can select one additional style (bold) and two other languages (Hebrew and Latin Extended).

Final thoughts

Having been through more than one redesign project in my web career, I know from experience that it takes a little time for users to grow accustom to UI changes. Google Fonts was long overdue for a redesign, and the changes that they’ve made certainly make it a more visually appealing website.

Maybe Google Fonts is one of the first in series of changes coming to the Google properties. So if anyone from Google is reading, I’ll cast a vote for a redesign of Google Analytics next.