You know what makes up a good website:
- great color scheme,
- intuitive navigation, and
- awesome calls-to-action
- (among many other things).
Since all of these elements are calculated to stand out, it makes sense that they’re important in web design. And they all share one crucial aspect: font selection.
The best web fonts are those that make reading easy and quick without drawing attention to themselves. (Display fonts garner notice because that’s their purpose; but even they flounder if they emphasize showiness over legibility.) You know a website is doing a good job when your audience hardly thinks about the fonts.
Here are some ways to tell which fonts will make your website a go-to for your clients…and yourself.
Background of Web Fonts
Web fonts were initially developed so designers could control the appearance of their text — something not possible with the initial stages of HTML.
With the Web making it possible to exchange all kinds of creative ideas across vast distances, the design and typography communities began exploring ways to make Internet spaces more beautiful. Check out a few examples of the thousands of beautiful fonts crafted for the Web in the wake of this design explosion, with brief explanations of their creative philosophies and uses.
However, even with a multitude of great choices, researchers have learned that simple fonts are more likely to make readers perform calls-to-action — buying, subscribing, etc. — and quickly (think Calibri or Baskerville).
[Tweet “Simple fonts are more likely to make readers perform calls-to-action — buying, subscribing, etc.”]
Which Fonts are Best for Web Use
If having too many options overwhelms you, there are ways to narrow down which typeface styles are right for your website.
Psst: Have you heard about Hectic? It's our new favorite tool for freelancing smarter, not harder. Client management, project management, invoices, proposals, and lots more. Hectic's got it all. Click here to see what we mean.
The first criterion to consider is whether the font you have your eye on has been optimized for Web use. (Google Fonts are a good place to start.) If you find a font that you just can’t live without, but may not translate fully across all platforms, make sure you embed it or specify other font options in your coding.
Other requirements include legibility and good rendering in various sizes (especially for body copy).
“Web safe” classics
Designers have a wide range of opinions on what is the “best” font to use, but many suggest that the old standbys — Georgia, Arial, Verdana, and Trebuchet, among others — are still so versatile that you shouldn’t rule them out immediately.
These fonts are commonly known as “web safe” because they require little to no technical savvy to make sure they look appropriate on all browsers, apps, and mobile devices.
That doesn’t mean your options are limited to the tried-and-true.
Newer typefaces like Museo and Minion Pro are just as usable as many of their predictable predecessors, but exciting enough to keep your site visitors interested. Other strong options include Burlingame, Lato, and Exo 2.
Which one(s) is right for your site?
We know a font is most effective when it is least distracting. To get the best response from your readers, you must employ
- font sizing,
- leading (line spaces),
and other characteristics to help your typeface communicate your content.
Another key part of font optimization is making sure visitors can see your font — obvious as it is, some people forget that their font may not show if they don’t program it correctly. Here are some guidelines to embed your type using Google Web Fonts or @font-face. As a bonus, these instructions also come with samples of the top recommendations on Font Squirrel and Google.
…but don’t forget the design aspect!
Always, the font(s) you choose should fit the “feel” of the brand, so use your imagination!
Don’t hesitate to play around with crazy font combinations until you find one you love. Then:
- Test your pick by using it for a full page of text and seeing how it reads.
- Would you enjoy browsing a website that used these particular typefaces?
- Are you more or less likely to trust the site owners because of the impression their fonts give?
- How does it appear on mobile?
Have you found (or designed) a website with outstanding font choices? Or have you stumbled on some that look like the webmaster threw together the most decorative fonts from Word? Tell us in the comments, and get inspired to create your own Internet masterpiece!
Keep the conversation going...
Over 10,000 of us are having daily conversations over in our free Facebook group and we'd love to see you there. Join us!