Which fonts convert best in web design & are you using them?

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.

💔 Falling out of love with your clients? Trade some of your worst clients for the best companies in the world with SolidGigs, our premium weekly freelance job list & course library. Love your business again. Learn more »

PS – This is post 3/3 in our short font series. Check out our posts on finding the best fonts for print and the best fonts for branding.

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).

calibri baskerville-sample1

Click To Tweet

Enter your email. Grow your business.

Submit your email below and join 45,000+ creatives who get our most helpful content via email every week. 100% free. Unsubscribe anytime. Privacy protected.

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.

The first criterion to consider is whether the font you have your eye on has been optimized for Web use. (Google Fonts is 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.

Newer options

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.

Museo burlingame-lead

Lato-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),
  • color,
  • gridding,

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?

Share your favorites!

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 5,000 of us are having daily conversations over in our free Facebook group and we'd love to see you there. Join us!

  1. I like to stick with Arial, as it looks more professional and displays on all browsers and devices clearly. I take a look at sites like Microsoft and IBM, and imitate their style. Check out my site at http://www.trigwebdesign.com

  2. Very interesting topic has been discussed here. I am a freelance website designer and there are different types of fonts I use in web designing according it’s features. But my favorite is Calibri.

  3. Great article 🙂 I am personally fond of Constantia, Open Sans and Lato though I use a variety depending on the feel of the site Im working on.
    Another note on the topic is to not use too many different fonts on a single project because it can be very distracting/confusing, in most cases you only need 2, 3 max. Users expect a certain amount of predictability and if you don’t deliver on that you can most often expect a high bounce rate.

The conversation's still going in our free Facebook group . Join us there!