When choosing from the vast array of font options on Google fonts, you may be overwhelmed by choice. Here’s what you need to know to pick the right one for your needs.
With a library of close to 1500 font families, using a Google font for your next web project is an easy way to stand out from the crowd and give your site individuality while still being accessible. Google fonts help websites load faster for end users, look good, are open source (so no need to pay for licensing), and allow the user to test out different font pairings so your headings and your paragraph content always look good together. Here’s what you need to know to start using Google fonts for your website.
In general, when selecting a font for a business site, you need to keep a couple of things top of mind. The first is purpose – what kind of site are you creating? The second is appearance – what kind of impression do you want to give to visitors to your site? A law office, for example, would want to project a very different corporate image from a trendy hair salon. One of the best ways to project that image on the internet is through the choice of fonts. So the law office would want to go with a more traditional serif font. Serif fonts look like they have little feet on them – decorative strokes that finish off the end of a letter’s stem. Sans serif fonts do not have this flourish. Serif fonts are associated with a more traditional, establishment feeling. A serif font says “We know what we’re doing, and we’ve been doing it for a long time. You can trust us”. A sans serif font, on the other hand says “we’re hip and approachable” and are associated with openness, friendliness, and being trendsetters. So depending on the purpose of the site, the appearance of the fonts on it should further the impression the site wants to promote.
Fonts of a Feather Pair Together
Once you’ve made the choice between a serif and a sans serif font, you might think you’re done – but the decision process has only just begun. There’s a popular misconception out there that if you pick a single font and use it everywhere on your website you’re delivering the best site possible. That’s because fonts take time to load so adding a secondary font can slow down your site’s loading time – unless, of course, the fonts are already cached in the browser. The immense popularity of Google fonts mean that most people have them cached in their browser so site load speed isn’t affected by having a secondary font.
There are lots of reasons to use a secondary font – including changing the context (like displaying data beside a more informal or editorial type of content); to get different weights and styles (for example bold for emphasis and highlighting text and headings or Italics for attention or to distinguish a word from its neighbors); to account for missing features such as special characters or a different alphabet set; and to complement and enhance a brand’s personality. In the law office example above, they would use a serif font as their primary text, but might use a different, more subtle serif font or even a sans serif font for information boxes or calls to action to make themselves look more approachable. Google even has suggested pairings on the fonts site to make the pairing process easier.
Being in Style: What you Need to Know About Font Styles
We touched briefly on font styles in the previous section, but they bear more discussion. A quick browse on Google fonts reveals that there is a wide variation in font styles available. Everything from a single style font (Koulen, for example has only one font style – what you see is what you get and that’s it) to 18 styles and 3 types (Barlow, Barlow Condensed, and Barlow Semi Condensed each have 18 styles, so a whopping 54 styles between them). Having different font styles available gives you more freedom with your design. At a minimum it means you can use the same font for your headings and subheadings by making them bold, italicized, or both. It also gives you the freedom to use run-in headings, which are headings that literally run into the first sentence of the paragraph. This can be a great stylistic choice for short headings, or on pages where you don’t want to break up the text too much with spaces around the headings and subheadings.
Another benefit of different font styles and weights (the weight is the thickness of the font) is in graphic design. A brand name that consists of two parts but is one word could be designed to use different font weights on each part of the word. Like this:
Even though the words are pushed together in the logo, they read as two separate words because of the differing font weights. Styles give your font personality – and while you certainly shouldn’t aim to use all 18 styles of a font on a single page, using a few different ones will give your page character and make it more interesting for the end user.
Things to Consider: Glyphs and Languages
Another important consideration for many sites in this global era is the availability of special characters such as accents, as well as the availability of another language’s set of characters. At Y, it was important to us to choose a font that had an Arabic counterpart so that our site looked unified no matter which language a user viewed it in. Google fonts allows you to search fonts by language so it was pretty easy to search for a font that had both an Arabic version and an extended Latin version. From there we chose IBM Plex Sans as our website font in English and IBM Plex Sans Arabic for the website font in Arabic.
Google fonts are popular in web design for a few reasons – they are easily paired, can come in multiple styles, are open source and easily available, are easy to embed, and, perhaps most importantly, load quickly for users with no need to download fonts to their computer so designers know that what they intend a user to see is what they see.
For most business sites, a Google font is the perfect solution – it looks good, is easy to implement, and will not cause site performance to suffer. But as to which Google font to use? You can stick with the most popular (and Google fonts lets you sort by most popular, trending, newest, and alphabetically by name) or go for something a little more unique – the choice is yours!