Google Fonts Reimagined With Material Design

Google Fonts logo

Google Fonts was launched in 2010 as "an engineering initiative to move the web forward and make it faster."

Using site caching, compression and other technologies, Fonts was aiming to create a simple way to add typographic variety to websites. Initially had only 14 open-sourced fonts, now Google fonts are viewed on the web by over 15 billion times spanning over 135 languages.

In fact, Google Fonts has been one of the most popular APIs the company has ever had, and it has been an invaluable web resource ever since.

For years, Google has offered a cache of fonts for anyone to use. And after all those years adding new collections into its font library, on June 15th, 2016, Google overhauls Fonts with a new design, a design no other than its own Material Design. The company does all the changes to better showcase typography and type designers while making its fonts easy to explore and use.

And because this moment will go down to Fonts' history, Google also introduces a new logo that highlights a San-Serif uppercase F with a bright red taken from Material Design's color palette.

The brand new layout that displays font previews in a dynamic grid that resizes as users adjust their preferences. The new design allows easy checking on every style for each font, and change the preview text, and compare different variety side by side.

The left-hand sidebar comes in handy as it can provides a search bar with filters to include category, language to parameters. And because it's consolidated into a single panel, the sidebar allows users for a full-screen browsing experience with a single click.

The font family modules use a localized toolbar, that appears on hover. And the selection drawer that shows selected fonts, can be accessed any time during a session.

And since not everyone that visits Google Fonts know what they're looking for, they can visit the Featured section where curated fonts are shown. And just like usual, it allows users to download fonts, or grab a snippet to embed them on their own websites.

Google Fonts - screenshot

Over the last six years, the team has continued to commission new fonts, adding dimension and range to the directory. Now, Google Fonts is taking its commitment to design one step further with an updated directory - one that showcases typography and type designers while making fonts easy to explore and use.

Using the Material Design framework, we created a design that scales across different screen sizes and devices, and updated the entire look and feel of the site, from the overall interactivity all the way down to the logo design.

Google Fonts design

There is nothing wrong with Google's old Font. However, it doesn't anymore match the design-centric philosophy behind the initiative. This is just like what Google said: "Design is always evolving." Furthermore, a major redesign to include Material Design is in line with Google's way to put things under its own brand and character.

What the design team at Google did, was making a massive visual overhaul to make its interface easier to use and aesthetically more pleasing to see.

What the design highlights is the flexibility of grid system that allows different types of content and page compositions to complement one another, despite being served on different screen sizes. The high-contrast colors of Material Design helps the elements to stand out better, creating a consistent visual cues.

Because the design is all about optimizing what Fonts already had, Google leverage experience by keeping the basic features (search, filter and editing accessible), but adapt to different user flow.

The new Google Fonts is the work of a talented team of designers, engineers, product and program managers, writers, and researchers. We hope that you're as excited as we are about the new Google Fonts, and that these new features will inspire you to dig in and start building!