“As a frequent user of this site, I appreciate the improved layout and the control I have over the font-sorting options. The Featured section has a high-end look that highlights recommendations.” —juror Libby Bawcombe

“Long awaited and so worth it! Incredibly useful tool and presented effectively—the fonts are the stars, as it should be. I’m a big fan of the restrained color palette.” —juror Keri Elmsly

Overview: When it first launched in 2010, Google Fonts had the dual purposes of introducing more variety into web typography and optimizing compression and cross caching. Now redesigned, Google Fonts engages visitors by placing typography front and center, making it easy for designers and developers to explore and use the fonts. Layers of interaction and experimentation enable visitors to connect with the fonts personally; new tools give Google Fonts’ users the ability to play with color, font pairings and scale as well as dynamic type specimens to explore its robust directory of open-source fonts.

•Visitors can access analytics on each font, including the countries in which it is most popular and the number of times the Google Fonts application program interface has served it over the past week.
•The site’s front end was built in AngularJS with Angular Material, Java 8 and JavaScript.
•A team of ten people took nine months to complete development.

Comments by Yuin Chien and Zachary Gibson:
What are some of the project’s core features? “To optimize the browsing experience while keeping features like filter and search accessible, we designed the user interface (UI) containers to adapt to different user flows. The search panel on the right enables visitors to explore the Search and Filter feature and can be dismissed with a click. A localized toolbar simplifies and facilitates the editing of sample text. The option to apply your changes and preview them across all font families is also readily available. The font selection bottom drawer is accessible anywhere in the directory without additional navigation, making important information easy to reference at any point during a browsing session.”

How did time constraints affect your final solution? “Instead of proposing new features that would require heavy technical resource, we focused on creating engaging, playful user experiences with visual design and UI animations.”

What was the response? “We received many positive reviews from the press, including Fast Company, Hacker News and The Verge, in addition to a lot of love on Twitter. The redesign won three awards: two from Communication Arts and one from the Society of Typographic Arts’ STA 100. Today, Google Fonts is viewed more than 15 billion times a day in more than 135 languages worldwide. Since the launch of the redesign, the number of users has increased more than 15 percent.”