Google Fonts – Typeface & User Experience
As designers will know, choosing the correct typeface for their client is very important. The characteristics contribute massively in defining a brand and must compliment, if not enhance, the entity and subject matter. So, when Google Fonts released its latest version, I was very keen to see how they had improved the user experience from their legacy version. How easy had it become to find the perfect typeface for my latest project?
Firstly, the website is now responsive and by using their Material Design framework, means it works really well across all platforms. Gone are the days where areas of body copy in the ‘preview’ text section were clipped and lost; and it’s ‘so long’ to the bugs, where key areas such as the font names were covered up by buttons. Google have recognised responsive design is vital and by addressing this feature has instantly helped the user experience.
The overall design is much sleeker and cleaner with the use of a 4 column structure and having removed the awkward tabs, clunky buttons and a mishmash of colour, the interface appears more grown up and organised.
The website’s primary function and most important feature, is the ease in which fonts can be previewed and selected – it’s why we as designers choose to use it. Google have improved this no end, by introducing a localised toolbar which appears by hovering over a typeface. It promotes interaction through a drop-down menu, allowing the user to preview a sentence, paragraph, numeral, or even the ability to write personalised text. With a simple click in the preview box, the user is able to type over the default copy.
The user also has the option to preview this across a single typeface, or the entire library, so comparisons between different fonts can be made like-for-like. When applied, it’s instantly loaded – no more loading downtime. Located next to the ‘preview’ selection, the weight of the typeface can also be changed, via another dropdown.
The typeface sizes can now be increased or decreased via a slider, allowing useful single increment changes to be made, by using the left/right arrows on the keyboard, and replaces the preset sizes in the previous version, via a dropdown menu. Historically, the site applied the same font size across all typefaces which in theory was great, however, it meant you had to scroll up and down the page to relocate the font you were looking at. In it’s current form, the user now has the ability to resize only the typeface they are viewing, which means the preview window doesn’t move and no unnecessary scrolling is required.
The category picker is super easy to use through a handy sidebar and tick box navigation, allowing the user to filter categories like sans serif and handwriting; sort by trending and alphabetical fonts; filter by languages; and via another slider, vary the different levels of thickness, slant and width.
Google have added a rather funky feature to preview colour themes – perfect to see a typeface working not only in the traditional dark text on light background, but vice versa. Sadly, not all typefaces work well in bright, contrasting colours, so the added choice of the blue/yellow swatch, helps designers to identify where problems might occur, before downloading the font. However, I do think Google might have missed a trick here and would have been great to see the user taking full autonomy on colours used, by integrating a hex colour picker – maybe in the next version please Google?
The specimen sample has also had a major overhaul. When selecting a typeface, the content loads as a new page rather than a popup, and contains information on its designer, a list of popular fonts to pair it with, the statistics on its usage, and in some cases an in depth history of the typeface. Whilst it’s not vital information, it does enhance the overall experience.
So I’ve chosen my typeface… Now what? I can select my typeface(s) by clicking the red ‘+’ button either in the overview page, or in the specimen page. Instantly, a notification alerts me in the ‘bottom drawer’ and remains visible and accessible at any point within the site, to refer to key information. It is here via a slick tabbed panel, that users can gather information on how to ‘embed’ the font(s) with stylesheet links, and the ability to ‘customise’ the weight and language selected respectively. It is also where the loading speed is shown and the level of impact it may have on the page loading time.
Google have simplified the previous version by removing the metric data and stripped back the loading indicator to a narrow coloured bar. The colour changes to either green, orange or red depending on whether the loading time is ‘fast’, ‘moderate’ or ‘slow’ respectively. For me, this is all the information I need to make a decision as to whether or not I should use a typeface and acts more like a gentle prompt should I get too carried away with complex fonts, on the odd occasion.
Google’s ethos is to make the web more beautiful, faster and open through great typography. With an impressive catalogue of over 800 typefaces being viewed over 15 billion times a day and in over 135 languages worldwide, this ever growing design resource needed to raise its UI and UX game. Google have addressed this. They have reviewed, evolved and improved the existing format and functionality, and now that they have launched this minimal yet intuitive led site, it has created a much smoother and efficient selection process, to find that perfect typeface. Well done, Google!
Check out Google Fonts here.
Do you have a site you want us to look at?
Every week, the StrategiQ team are looking for their favourite website of the week – so tweet at us or email us a suffolk@strategiq.co to get featured!
Or, are you a potential client and want our web designers or web developers to have a look at your website? Get in touch!
In the meantime, check out our client case studies!