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.
Get Weekly Freelance Gigs via Email
Enter your freelancing address and we'll send you a FREE curated list of freelance jobs in your top category every week.
Here are some ways to tell which fonts will make your website a go-to for your clients…and yourself.
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).
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 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.
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.
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 10,000 of us are having daily conversations over in our free Facebook group and we'd love to see you there. Join us!
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 www.trigwebdesign.com
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.
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.