Trying to pick a web font to use on your website?
A plethora of fonts exist out there on the web, but for each of the beautifully-designed fonts you find, there are dozens more that make designers like me cringe. However, there's no formula for choosing the right fonts, and what is "right" will vary for each project.
During the early days of the web, designers were restricted to a handful of ‘web safe’ fonts, or those that were widely recognized by different web browsers and computer systems. At that time, this meant that everything looked about the same and was quite bland.
Though web designers are no longer limited to the small range of web fonts available back then, we still have to think about whether the font we want will work for the web. For example, although you have a font loaded onto your computer, your website users may not have that specific font installed on theirs. Using web fonts will keep your website looking consistent across different web browsers and computers, but that doesn't mean you're limited to just a few options.
If you want to use non-system fonts on your website, Google Web Fonts (GWF) is an easy way to make that happen. GWF is free to use and doesn’t limit your usage to a number of websites or a site’s monthly traffic, and doesn’t require you to set up an account. Another perk of Google Fonts is that you can download a desktop version of the font so you can take it for a test drive in any image editing software or word processor to see how it will look before coding it into your website.
Here are a few quick tips when choosing web fonts:
Choose Wisely. Pick fonts appropriate to your content. It’s easy to go crazy with font choices, but you want to make it easy for the reader to do what the text is made for… reading. In web design, most pages have a substantial amount of body copy. This leaves the headlines with little air time, so fonts for headlines can be a little more creative. Since all the attention will be on the body copy, visitors need to be able to read it easily.
There are two main options when it comes to body copy: serif and sans-serif. If you don’t know the difference between the two, think about it in terms of feet and without feet. There is no right answer on which one of these two to use.
Designers backing serif fonts note that they are easier to read because the serifs act as little eye-trails guiding the reader through the copy. On the other side, some designers say sans-serif fonts look cleaner, which make them easier to read. Both camps focus on cleanliness and readability, and I agree.
There are people who choose not to use a serif or sans-serif font for body copy because they want to use something cute or unique. Don’t be one of those people; your readers will appreciate it.
Using too many different fonts in one project will spoil the design. Just because you have access to thousands of web fonts doesn’t mean you have to use all of them in one project. As a general rule, limit yourself to two or three to keep from confusing your readers and damaging their eyesight..
Choosing fonts to use for your website can be a thrilling experience, but with thousands of options, it’s easy to make a bad decision.
Here are 10 of VIEO’s favorite Google Fonts to start you down the path to finding the best font for your web project! We've included both serif and sans-serif fonts for body copy and even a few decorative fonts if you want to spice up your headlines.
Have suggestions? Let us know your favorite Google Fonts in the comments!
Editor's Note: If you've ever spent time looking through different fonts, you've probably seen the following: "The quick brown fox jumps over the lazy dog." It's the most popular pangram, or sentence containing all the letters of the alphabet. I thought it would be fun to write my own for VIEO, and after spending hours hunched over my coffee table on a Sunday afternoon, this is what I came up with. I also wrote one featuring F. Scott Fitzgerald that got axed, and I'm not at all bitter about that.
So, you know how to pick a font—how about the rest of your website redesign?
Download our Website Redesign Checklist today for more actionable tips for a marketing-driven redesign.