The new Google Fonts is a win for designers

Alex Bigman

Google launched Google Fonts in 2010 to provide web fonts free of charge. Over the next six years it grew considerably, becoming very popular with web designers—for the obvious reason of affordability.

The original website was definitely what the startup world would call an MVP: minimal viable product. It got the job done, but it wasn’t pretty, and it wasn’t especially easy to use. As an increasingly design-oriented company, Google evidently saw that a major UI/UX redesign was in order.

restructuring the google fonts website
Mockup of a component of the new Google Fonts website, via Google

In June they released a brand new version of the website, and it is glorious. Here we’re going to take a quick tour that will tell you what you need to know to use this service intelligently, whether you are a newcomer or a Google Fonts veteran. First we need to breeze through some basic questions.

What is a web font, anyway?

Rewind to the dawn of the modern Internet: 1996. At this point, if you’re a web designer, the only typefaces you can reasonably select are the ones that you can be sure every personal computer owner already has installed on his or her machine. If a visitor does not have the typeface you have used on your website, they have to download it on the spot, which in the days of dial up, is a no go.

In ’96, Microsoft decided to do the Internet a solid by distributing a selection of fonts for free, including Arial, Times New Roman and Verdana, in order to increase the stock of viable typefaces for web designers to use. The web starts looking nicer, but you’re still mostly see the same typefaces over and over. If you come across something more unique, it’s probably an image file.

Fast forward to 2009. A CSS program called @font-face arrives, making it viable for the first time for website visitors to download font-files on the spot without too terrible of a download time. Fonts that are made to interact with this software are called web fonts.

Are Google Fonts really free? What’s the catch?

Following the @font-face revolution, a couple of services popped up offering a good selection of web fonts for a monthly fee, which they shared with the professional font foundries who supplied the typefaces. The biggest of these services is Adobe Typekit.

Enter Google. Not to be outdone, the Internet giant decided to create a comparable service for free. Yes, free free: all of the typefaces listed in the Google Fonts directory are open source, meaning that you can not only use them for any web page, commercial or non-commercial, but, unlike with Typekit, you can also download them onto your computer and even tweak them yourself! Best of all, Google’s massive server power means that download speeds are lightning fast, ensuring that your web visitors have a good experience.

So what’s in it for Google? Obviously they aren’t doing this just from the good of their hearts.

improving google fonts
Mockup of a component of the new Google Fonts site, via Google

There are a few convincing theories. One of them is that they want to discourage web designers from using image files instead of font files, because images cannot be indexed by Google’s search algorithms. Another is that, once a user downloads a web font once, they have it forever—so every site they visit with that font from then on will load at optimum speed. Google uses Google Fonts for its own platform, so it is in their interest to have visitors’ computers primed to use their products at lightning speed. In general, Google, being a web-based company, stands to benefit from a faster and more attractive Internet.

So why would people opt for expensive Typekit over free Google Fonts at this point?

Six years into its existence, Google Fonts is able to boast plenty of quality typefaces. But because it is free and the type designers aren’t seeing any royalties, it is never going to be able to pull the kind of quantity and quality that Typekit does. Typekit has way more fonts, and all of them demonstrate the highest degree of craftsmanship. On Google you may occasionally run into issues, like awkward kerning, bad rendering at very large or small typefaces, or just aesthetically questionable student work. On the whole though, it is a very good option at an unbeatable price.

google fonts website
Mockup of a component of the new Google Fonts website, via Google

The new Google Fonts

The Google design team released a nice explanation of their redesign, pointing out, for example, their introduction of new color options, a more versatile grid layout and select UI changes. Here we’re going to go into a bit more depth, comparing the old Google Fonts and the new one side by side. If you were accustomed to the old site or if you’re new to Google Fonts, this tour will get you up to speed.

Fonts are way easier to select. But where’s your “collection?”

google fonts collection

In the old Google Fonts, you found ones you liked and added them to what was called your “collection.” You did it using a big blue button emblazoned with this phrase.

Apparently, Google designers observed that users were somehow getting confused by the word “collection,” so they ditched it. Now, you add a typeface by clicking a plus sign icon, and an expandable window appears on the bottom edge saying “1 family selected” (or more, depending on how many type families you’ve chosen).

One of the best things about the new website is that the plus signs appear wherever a typeface is listed, so it’s really easy to add ones that you may have stumbled upon. If you want to remove them later, just click the minus icon that takes the plus sign’s place. By contrast, in the old Google Fonts you could only add typefaces from the main directory, so if you encountered one via the “common pairings” feature, which was located on a pop-out page (an annoying UX aspect that they rightly nixed), you had to just remember it and create a new search back at the directory.

Filters are prettier, but still a little tricky to use well

filter google fonts

The filter options, which used to be on the left, are now on the right. One nifty feature is that this margin can be collapsed using an arrow icon if you want to devote all of your screen space to the directory grid, then easily re-opened when desired.

If you were accustomed to the old filters menu, you will notice that the new one uses fewer drop down menus, so things like categories (serif, sans serif, etc.) are always exposed as check boxes. So are the sliders for number of styles, thickness, slant and width, which you check to activate.

These sliders remain somewhat of a danger zone, as well as a reminder of how Google Font’s selection can be lacking in terms of quantity. For example, if you limit your search to typefaces with 3 or more styles (i.e. bold, bold italic, etc.) and then start messing around with specifications of thickness, slant or width, you will quickly find yourself finding a “no matches found” page.

There are more interactive features, but some of the old ones are gone

google fonts features

The most dramatic of these is a color option in the upper right corner, which allows you to set the website’s background color to yellow, blue or black in addition to the default white. This can be useful if you’re trying to get a sense of how a typeface looks on a colored background.

Another great feature is that you can type right into the grids in the directory, replacing a typeface’s default text sample with your own words. There are some curious exceptions to this principle, though, like on a typeface’s expanded specimen page (accessed via “see specimen”), where the example glyph, shown at a large size, cannot be swapped with any other.

On the specimen page you will find the “popular pairings feature,” which lists typefaces that commonly accompany the one you’re looking at. The old Google Fonts site simply showed you two identical snippets of text, one above the other. The new pairing feature makes one typeface a header and the other body text—as pairings typically work on actual web pages—and allows you to select which one you want to put in which position.

One interactive feature that seems to be missing is the “compare” function, which on the old Google Fonts allowed you to overlay two fonts in your collection to see exactly how the characters differ. That seemed handy, but maybe it didn’t get a lot of use.

Information is presented better

google fonts

It’s nice to know where your font came from. On the old site, the specimen page included the designer’s name, which linked to their Google+ page. Sorry Google, but nobody wants to wind up on a Google+ page. The new site’s far superior, grid-based specimen page includes the designer’s bio right on the page itself, above a description of the font.

Another piece of information that the old site provided, or attempted to provide, was the global distribution of a typeface’s implementation. They presented this in the form of a map, with different countries shaded in different ways to signify the font’s prevalence there. Unfortunately, there was no key to what such shading meant, so it was basically meaningless. On the new site they replace the map with a handsome pie chart, which is much more self-explanatory.

Perhaps the most crucial statistic that Google offered was page load speed, which increases depending on how many font families and styles (i.e. bold, italic, condensed, etc.) you select. (As a reminder, you should only select the styles you are going to use; don’t select every style in a family “just in case”). Unfortunately, on the old site this was presented using a speedometer and a number. What this number stood for—milliseconds?—was not clear. Things on the new site are much simpler. You end up with one of three speeds: slow, moderate or fast.

The new “featured” page is a win for designers

featured google fonts

On the top navigation bar, between “directory” (the main page) and “about,” is a link to a new section called “featured,” where professional type foundries, Google, or individual users post curated collections like “headline-worthy serifs” or “multi-script typefaces of 2016.” It’s a great place to start looking for inspiration, and of course you can add any typeface you discover to your collection—er, whatever it is they want us to call it.

Want to learn more? Check out our articles on perfect Google Font combinations and how to choose the right Google Font.

Related articles

Find the perfect Google Font pairing for your website

Find the perfect Google Font pairing for your website

Google fonts offers an entire library of fre web fonts to choose from. Great! But what happens when you actually scroll through that list of 650 options? Eyes glaze over, fonts start blending together, and you might just pick a font that starts with ‘A’ so you don’t have to scroll down any further (maybe that’s how Arial…

How to choose the right Google font for your website

How to choose the right Google font for your website

You probably don’t think much about typography in your daily life, but when it comes to your website you have some big decisions to make. The right fonts help determine your website’s personality, and they help grab your viewers’ attention. “Great!” you say—up until you see that drop-down list. There are a total of 647…

The hottest web design trends for 2016

The hottest web design trends for 2016

It’s not every year that we experience big changes. With such rapid growth in technology over the past few years, we’re sure that the big 2016 web design trends will focus on maturing and expanding on those developments. Flat design will get more texture, “cinematic experiences” will become more common, and the use of JavaScript…

Current Design Contests

Designers, check out these contests so you can start building your career.
0%