Picking web fonts for your website can be a tedious or even daunting task. There are literally thousands of options available to you. Not only are there thousands of options, but there are thousands of options that are free to use.
Google Fonts, for example, has over 900 fonts that are free to use. For non-designer types, the hard part is weeding through all of these options hoping to pick something that will work best.
Choosing your font is not an exact science per se. The perfect font doesn’t really exist, rather there are multiple fonts and font pairings that will probably serve your purpose better than others and it comes down to preference and how you see your brand and web identity. What your aim should be, is to narrow down your choices so you can zero-in on what will work best for your needs.
Know your brand, know you feel
Shoehorning a font into your website because you love script fonts or simply because you’ve used it before, might not make the most sense for you or your brand. It’s the first mistake people can make.
Even an experienced designer can fall in love with a font and overuse it. To avoid this, you need to ask yourself what kind of feel you’re looking for. Are you trying to create a page that’s elegant or have a luxury feel? Maybe you want something big and bold, something that comes across more masculine. Maybe you want a more traditional magazine look or perhaps you want an anti-corporate feel.
Understanding what you feel is what will help drive the best choices.
Get inspired and use font matches
Have you been to Google Fonts already and you’re now stuck?
Don’t be afraid to use Google phrases that match your look and feel. Type in something like “Elegant Graphic Design” (if that’s what you’re looking for) and see what pops up in an image search. There’s a very good chance you’ll find some text examples that will fit your needs.
You can also snip a section of text you like and upload that image to an online font matcher and try to match something close to it. Provided the font you’re looking for isn’t too crazy or custom, it can help steer you in the right direction. Font Squirrel has a good font matcher, so does MyFonts. Not all suggestions will be free options, however, this process can give you some great insights into what kind of fonts might work best for you.
Find a display font with personality
Typically, website text is broken up into various headers and body copy. Your site can be broken up into even more hierarchical categories, however, for our purposes, we will keep it simple.
Display fonts are usually designed for headings, or a better way of putting it, very short phrases. For example, I would not recommend using an all-caps font (a font with only capital letters) for a paragraph of text, it would become incredibly hard to read, but it can be an excellent header that isn’t very long.
You don’t have to use a display font for your headers, you can use the same font-family for all text if you wish, however having some contrast between your header and your copy can give your site a lot of personality. Below are some Google font examples:
Open Sans is the body copy in the above example, you’ll note I’ve used Open Sans Condensed as a header on one example. It’s perfectly fine to do this if you think it matches the feel of your site. But you can clearly see the value that could be had by choosing a unique display font for your headers. You’ll also note that the body copy above is simple and easy to read.
Versatility for body copy:
All text on your site will be presented in a hierarchy manner. For example, your Header or Title is usually larger than your body copy so you can break up information and present it in a way that is better absorbed by the user. You might also do this with sub-headers, buttons, links, quotations, disclaimers or even numbers/graphs or other characteristics of the information you might want to convey. For this reason, you want to choose a body copy font that is easy to read. Picking fonts for your body copy should have at least 3 weights (light, regular and bold) with matching italic options.
It’s even better if you can also get condensed or even extended versions of the font. This gives you a lot of control and will help keep your site looking cohesive and consistent with your look and feel.
This is especially true if you have a lot of text information, like a blog site or even a storefront with a huge catalog of items.
Let’s say you have an online store that you want to make. How will you differentiate between the item title, the description, the review and the price? Perhaps you also want to show the savings versus the list price? Will, your text look different on the buy now button? There lots of possibilities on where you might differentiate between font usage.
To get you started here are some quick Google Font recommendations for body copy: Open Sans, Lato, Raleway, Roboto & Montserrat. Remember to try and keep your copy simple and easy to read.
Your Journey to finding the right fonts for your site can be a long one, but it’s possible to narrow down your choices by doing some well-focused research and choosing something that fits your brand and identity. Starting with finding a unique display font and picking a versatile body copy font will start you down a good design path that will serve your purposes well.
Let us know!
If you have any questions or comments, we would love to hear your thoughts.