Ever try to find that perfect font and then you end up down the rabbit hole of font choices and selections? Every day new typefaces make their way to the web. But not every font, no matter how cute, is right for your website.
When picking the perfect font(s), you have to think about a few things. Readability and design are a given, but you also need to consider load times and acceptable use.
I remember when I first started in business, I didn't give a second thought to fonts for my website. I didn't consider what they would look like across devices. I wanted pretty and to hell with everything else.
That's the point that I discovered not all fonts are created equal. That's also the point that I learned all about commercial licensing and acceptable uses.
Now I was lucky that I chose web safe fonts for my website body text but my headings, that's a different story. The result, different looks in different browsers on different devices. See mobile was up and coming, and I'm not sure that iPads and tablets even played a part in web browsing. Who would have thought that mattered?
A graphic designer I was not. I had a lot to learn about typeface, kernings, weights, contrast and everything else that goes into making these choices.
Here are some tips that I picked up to help you find the perfect web-friendly font choices.
There are five basic types of fonts: serif, sans-serif, cursive, fancy and monospace. The two most popular for large blocks of text come down to serif or sans serif.
Let's start with the differences of font choices. Serif fonts have small strokes that extend from the end of the letters. Some people call them feet or tails. Serif text is easy to read in print media and has been a favorite for books and newspapers.
But for web text, it's not as appealing. Serif fonts are great for headlines and documents that may be downloaded and printed.
Sans serif, on the other hand, is a simple font and lack the tails. Many websites now use sans-serif for the body text because people find it easier to read on most devices.
And remember different font styles communicate different messages. So one sans serif font will work for one type of business but not another. Remember readability is a must for any font choice.
We all have different personalities; some are extroverts who feel at home in any crowd while others are introverts and prefer a more quiet environment. And some creatives tend to be more casual and comfortable.
The same goes for fonts.
When picking fonts, think about the type of personality you want to represent:
Traditional, reliable, corporate or respectable. These fonts are timeless and give the impression of trust. Try these, Times New Roman or Georgia.
Romantic, elegant and vintage. These fonts are usually handwritten-type fonts that are curvy. Use these fonts sparingly since they can be hard to read in large blocks. Some popular ones are Alex Brush, Black Jack, Good Vibes and Great Vibes.
Now that you have the basics under wraps let's talk where to find web friendly fonts.
We no longer look at websites on desktop and laptops. Just because your site looks beautiful on full-width screens doesn't mean they look good on other devices. Most of us get the bulk of our traffic from mobile devices, so it's important that your fonts look good on these too.
And, the good news is that you can create differences in your text copy with different types of fonts. But you need to put some thought into the combination so that they do work well on all devices.
Usually, that means two (not more than three) complimenting fonts. To add more variation, you can use colors to highlight important words and phrases. Here are some of our favorite sites for font pairing suggestions:
There are many places to find typefaces for your website and brand. If you have a graphic designer, start there. And if not, here are some of my favorite resources.
Google Fonts: All Google fonts are free and open source which means Google takes care of the licensing. You can safely use these fonts on your websites, social media and any of your digital spaces. Most builder programs and template based sites integrate Google fonts for easy use.
Font Squirrel: Font Squirrel tries to list fonts that are commercially licensed. But, not all fonts are free for web use. Most of the fonts have free desktop licenses meaning they are allowed in commercial graphics and images with no charge. Embedding on a website or in an e-book requires different licensing. Be sure to check before using on your site.
Adobe Typekit: Typekit has an array of beautiful fonts that are available for sale or by subscription. These fonts are not free for use, but they do have simple licensing, so there is no guessing on what is acceptable use. They also make it easy to add the fonts to your website using kits. And the kits allow you to make changes if you want to try different fonts later.
Final Thoughts on Font Choices
Of course, this is just a start to web-friendly fonts and typography. You also need to consider things like:
- color scheme
- kerning and leading (the space between letters and space between lines – line height)
- contrast (light and dark), and of course,
- alignment (left is easier to read)
Selecting the perfect web font can either be fun or make you want to bang your head against a wall. But you can find a typeface that works for your website and appeals to your audience.
How did you choose the fonts for your website? We'd love for you to share your tips below.