New Google Fonts Interface Offers Clean Access to Beautiful Typography
Good, readable fonts make a huge difference. You can’t have a beautiful and functional site without the right typography. For years, Google Fonts has been the source of free and open source web fonts. Although the fonts are great, Google Fonts didn’t have the best user interface. It was bulky and looked outdated. The recent redesign changes that completely.
Meet the new Google Fonts, cleaner, sleeker and much more functional. The redesigned interface offers access the more web fonts without the clutter. In fact, I personally think this new interface is one of the best implementations of Google’s own Material Design theme.
Access Google Fonts at fonts.google.com and you will see a white interface with examples of popular fonts. Officially launched on June 14th, this new Google Fonts user interface allows you to find gorgeous fonts for your websites with ease.
Google Fonts Directory & Fonts
I’m sure you’ll love the new Directory from Google Fonts. Hover over any font you like and you can test different samples of the font. For starters, you can switch between Sentence and Paragraph view modes to see how the font behaves in real life. You can also see the entire alphabet and numbers as well as have your own custom view set up.
Of course, you can also switch between different styles, weights and sizes. If you like a particular view and want to test in on all of the displayed fonts, click on the Apply to All link below the sample. You can also click on the See Specimen link to learn more about the particular font you are viewing.
A very cool feature available in this version of Google Fonts is Type to Edit. The sample text displayed on-screen can actually be edited directly, without having to go through menus. You don’t even need to refresh the page to see the edited sample text.
There is also a paint bucket icon next to the main menu on the top-right corner of the interface. Click on the icon to change background colors. This feature is great for testing fonts against darker backgrounds. Google offers a selection of four color combinations: black font against white and yellow backgrounds and white font against blue and dark grey backgrounds.
Switch to the Featured tab and you can quickly access featured fonts in a sleek new interface. Samples of the featured fonts are arranged into typography art that you can click to access. Again, this new interface is something I’m sure a lot of web designers out there – including myself – can appreciate.
For a more detailed search, there is a search interface on the right side of the screen. Searching for fonts is now easier than ever thanks to the improved search parameters. You can activate – or deactivate – font Serif, Sans Serif, Display, Handwriting and Monospace categories to find a particular type of fonts.
You can also search fonts based on language, the available styles and even the width of the fonts. It is clear that Google Fonts want to make finding the best fonts very easy for designers.
Best Fonts in the Collection
Have I told you that all 804 fonts in the Google Fonts collection are available for free? You don’t have to invest a lot on fonts to be able to have a readable, cool-looking font displayed on your website. Some fonts are just too good to miss, so let’s go over a few and get started with Google Fonts, shall we?
Open Sans and Roboto are still the most popular fonts in the collection, but I highly recommend using Lato for maximum readability. The slight accents and different styles available for this font make Lato one of the best free fonts out there.
For some Monospace actions, check out Inconsolata and Roboto Mono are the ones to look into. The former comes in two styles: regular and bold. It is perfect for sites that want to feature an old-school, retro look while still maintaining maximum readability. It also works really well for displaying codes and quotes.
This next one is my personal favorite in the Serif category: Arvo. There is something about this font that screams vintage. Paired with a big image, this font – in white – will transform your site completely. It also works great for long-form content and quotes thanks to its good kerning and high readability.
Last but certainly not least, we have Alegreya Sans. This font comes in 14 styles and works really well when displayed in its Light or Thin form. There are not many web fonts that offer good readability with such a low weight, but Alegreya Sans works really well against light and dark backgrounds alike.
To use these fonts, or any other font in the collection, add it to your collection by clicking the + sign and follow the instructions to add selected fonts to your site. Add the displayed embed code to your page, use the font family of your choice and you are all set.