Five Tips for Choosing the Best Webfonts

Body: 

Web and print typography have a lot of obvious differences. Beyond resolution, variable medium sizes, user interface, and the fact that one medium reflects light while the other radiates it, the most frustrating historical difference has been the lack of fonts to choose from on the web side.

There are an estimated 150,000 fonts available to print designers, while Web designers have had to settle for a paltry five. All that has changed now with the ability to download webfonts you can use with any Web browser. Now there are close to 50,000 fonts available from a variety of sources, and the list just continues to grow. For practical information on how to use webfonts, read "What You Need to Know About Webfonts Part 1 and Part 2.

But don't rush out to enjoy this new treasure trove quite yet. Choosing fonts for the Web is not quite the same as choosing them for print. You'll have to consider a variety of criteria, some aesthetic, some practical. The five tips below will help you get there.

1. Choose for Styles and Weights
A typeface is a collection of fonts with different styles and weights. The default style of a typeface is generally referred to as the regular or roman font. However, you often need the bold font, italic (or oblique) font, and the bold italic font versions, too.

It's best to choose a type family that includes bold and italic styles as well as regular. If your copy (the text on the page) needs to be bold or italicized, but your type family doesn't provide specific bold or italic versions using @font-face, the browser will either display the text in the regular font or — worse yet — try to simulate the style by widening the regular font for bold or slanting it by about 12 degrees for italic. This never looks good. Fonts that haven't been optimized by a person for screen readability tend to be uncomfortable to read.

In addition to the standard bold and italic styles, many typefaces include a variety of different weights and thicknesses that can greatly expand your typographic options:

  • Weights and Thickness: Different darknesses of bold, often indicated with values 100 (lightest), 200, 300, 400 (regular or normal), 500, 700, and 900 (thickest). You may also see thin, extra light or ultra-light, light, normal or regular, medium, semi-bold or demi-bold, bold, extra-bold or ultra-bold, and black or heavy.
  • Condensed: The typeface has been compressed horizontally, allowing the text to fit in a narrower space.
  • Extended: The typeface is expanded horizontally. This added width generally gives the typeface a heavier, more solid appearance.

Although most designers try to avoid using "too many" fonts, a typeface with a variety of styles lets you easily add typographic variety without the visual clutter of a cacophony of different fonts.

2. Choose for Character Set
A font's character set (or répertoire) is the list of glyphs included with the font file. We generally assume that a font contains A–Z, a–z, and 0–9, along with the other common characters you can easily access with the computer keyboard. This is all we need for most purposes, but if you're creating a site with a lot of mathematical content or in a language other than English, make sure the font includes all of the glyphs you need to properly display the text.

Most Web Font Service Bureaus let you view a font's character set before you license it. If the font is already installed on your machine, use the Mac's Font Book (Preview > Repertoire) or Window's Character Map utility.

Font Répertoire in Font Book:

Many fonts include not only glyphs for English, but other Western languages, Asian languages, and more. If you're not sure which languages a font supports, Font Book can come in handy again. Select the font you're interested in and go to Preview > Show Font Info. It should list the languages the font supports.

Font Information in Font Book:

However, if you do not need other languages, having too large a répertoire means the font will have a lot of extra data, which equals larger files that take longer to download. In these cases, check the character set and then sub-set the font, removing unused glyphs to reduce the file size.

3. Choose for Optimization
Almost all of the fonts we use today were originally designed to be printed, not displayed on the screen. The obvious differences are that print uses reflected light and has a much higher resolution (usually 300 dpi) while screens generally project light and have a much lower resolution (72 to 96 ppi).

Fonts for print also have more exact typographic controls for kerning, where letters are spaced according to context provided by the letters around them. Precise kerning is still lacking in web typography.

However, rendering type on the screen goes far beyond resolution. Anti-aliasing is a process by which the edges of objects on the screen are slightly blurred, which creates the optical illusion that the edges are smoother and sharper. Anti-aliasing can depend on the computer operating system, the browser's rendering engine, and the type designers themselves.

Fonts are rendered very differently by the Windows and Mac OSes. The Mac OS and iOS have unparalleled anti-aliasing technology called Core Text, which takes care of anti-aliasing consistently across all applications. Windows also includes an anti-aliasing technology called GDI ClearType. Unfortunately, it wasn't on by default in earlier versions of Windows, and even then it only anti-aliases horizontally, not vertically, leaving the tops and bottoms of letters jagged.

On the left, the "m" does not have anti-aliasing, while the "m" on the right does:

To be displayed as clearly as possible, fonts should be optimized for the screen, preferably by the type foundry that created the font. However many Web Font Service Bureaus include their own tricks to help their fonts render as clearly as possible.

The most noticeable problem with fonts that aren't optimized for the screen are usually associated with display in Windows. A font that looks perfectly clear on a Mac may be almost illegible in Windows. Before you buy a font or use a Webfont Service Bureau, check to make sure the fonts have been optimized. Then test the fonts on both Macs and PCs before you design much, or you might get a nasty shock at launch when your client calls you screaming that they can't read the text on their own website.

4. Choose for Legibility
Legibility is the ability to distinguish different characters at different sizes. Legibility for the screen is based partially on the font being optimized, but there are aspects of typefaces that no amount of optimization can offset. The size and shape of the individual glyphs — their serifs and strokes — has a lot to do with how easily you can recognize characters at a glance.

One important point about legibility, though: The tendency in Web design over the years has been to make text too small, which reduces legibility. This is brilliantly illustrated in an experiment by Information Architects, where they held up a book printed at 12pt type next to text display on the screen at 16px type size. The two samples looked the same because pixels and points are not the same. A 12px font is actually small for the screen. If you're setting text this small to fit more "above the fold" when the page loads, stop it. People know how to scroll now, so you can set text at larger sizes and space out your content on the page.

Setting a well-optimized font at the right size can make otherwise hard-to-read text clear and crisp, but there are two other factors to consider when choosing fonts for screen legibility:

  • Consistent strokes: Consistent stroke thicknesses tend to be easier to discern as the font size is reduced.
  • Either no serifs or strong serifs: Weak serifs that go to fine points don't reduce well and tend to look fuzzy at smaller sizes. Fonts without serifs or that have very strong thick serifs generally work better.

Fonts with consistent stokes and either no serifs or strong serifs will be more legible on the screen:

Both of the above factors have led to the recent popularity of slab-serif fonts on the Web. Slab-serifs generally have consistently thick strokes and, by definition, strong squared serifs that reduce well in size. Museo Slab is an excellent example of the species:
5. Choose for Readability
While the terms "legibility" and "readability" are often confused or used synonymously, they are not the same. Whereas legibility is the ability to quickly recognize different glyphs, readability is the ability to read text over long stretches with minimal eye fatigue. It's like the difference between sprinting and long-distance running.

Readability relies to a certain extent on the legibility of the font — if you have a hard time discerning each letter, you will obviously have a harder time reading — as well as other typographic factors, such as color, size, and spacing. Look for these characteristics in your search for a readable font:

  • Letter spacing: This space is set as part of the font by the type designer. In print, you can adjust spaces between letter combinations by kerning. However, Web designers are limited to a more crude tracking control, using the CSS letter-space property. This puts the same amount of space between each glyph, irrespective of the actual characters.
  • Counter width: This is the open, negative space within certain characters like d or p. Wider counter widths are generally associated with increased readability for a font.
  • X-height: This is the height of the font from its baseline to the mean line, generally the height of the lowercase x. Although there's no empirical evidence, it's a generally accepted design rule that taller x-heights versus capital letter height increase the readability of a font.

While each of these attributes is important to consider, there is a Goldilocks story here. There are some who say, for example, that taller x-heights make for more legible fonts, but this is only true up to a point. What you're looking for is not an exaggeration of any one of these attributes, but the best balance of all of them. Helvetica is a very popular font, and this didn't happen by chance. Not only is it highly legible (consistent strokes with no serifs) but it also has been carefully crafted with a keen insight into the balance between letter spacing, counter width, letter width, and x-height. Not too little, but also not too much.

Bonus Tip: Choose for Voice
So why not always use Helvetica or its cheaper clone, Arial? Imagine a world where everyone had a pitch-perfect voice, like, say, Judy Garland. Aren't we much better off living in a world where Judy Garland's voice is joined by those of Johnny Cash, Bob Dylan, Amy Winehouse, and Lady Gaga? I think so.

Remember:
Typography :: Text
Voice :: Speech

I know this article's title promises only five tips, but I want to give you extra advice that can't be as easily qualified or quantified as the previous tips. When you choose a webfont, choose one with a voice that's in synch with your design's message. I know that sounds simple and obvious, but it's not. Readability, legibility, optimization, character set, and weight and thickness variety are all important, but if you rely on these criteria alone, you may end up with a typeface that doesn't match your message.

Choose the font to reflect the voice you want:

And don't shy away from decorative fonts for titles and headers if they reflect the mood you're trying to capture. Web designers have been playing it safe for too long, and now it's time to make your typographic voices heard. Here are some ideas to explore:

  • Choose a time period: Typefaces that are associated with a particular era or historical event, such as the Old West, the Renaissance, or the swinging '60s.
  • Choose a place or culture: Typefaces that are associated with a particular country or cultural heritage; for example, fonts based on Asian and Hebraic characters or typefaces closely associated with the Paris Metro and London Underground.
  • Choose an artistic style: Many artistic styles have inspired typefaces that are associated with them, such as Bauhaus and Art Deco.
  • Choose a texture: Typefaces that look rough, distressed, or are made up of brush strokes are just a few ways to add texture. Obviously, the more texture, the less suitable these fonts are for body copy.
  • Choose a mixture of voices: Once you become more comfortable with Web typography, mix typographic voices together.

Liked This? Read These!

This week I encountered a very peculiar bit of terminology. Read More
FontShop is the latest important type foundry to try its hand at making so-called "Web fonts," or digital typefaces adapted to the constraints and vagaries of display on computer screens. Some of... Read More
Font Bros is proud to announce the release of two amazing new display fonts by the talented Mark Simonson; Kinescope and Snicker. Both fonts were inspired by hand-lettered titles in the old Fleischer... Read More
One of the most common typographic tasks is to produce flyers, brochures, and short booklets. It's something that thousands of people, both graphic designers and non-designers, do almost every day,... Read More