Picking web fonts

As designer Oliver Reichenstein wrote years ago, 95% of web information is text. Text has to look good, and the right font face is a big part of that. But given the virtually infinite set of web fonts to pick from, where do we start? Here’s a few recommendations from what I’ve learned.

Decide on a font face for dominant content first

I split web typography into three categories: body, headline and accent text (i.e. everything that doesn’t fit neatly into a standard headline plus paragraph flow.) In the early stage of web design one category tends to dominate overall textual content; in almost all cases it’s the body text. Decide the right font face for this category first. This decision makes the rest of your font selections easier; by then you’ve already settled on a font on a your users will interact with the most.

The body font trumps readability above all else

Great web text is aesthetically pleasing and matches the creative style of the site or application behind it. None of that matters if the body font face, the workhorse of web text, is hard to read. Check out body text samples on multiple browsers, multiple devices. How is the font hinting? Be sure to check out samples on IE8 and IE9, where poorly hinted fonts often fall apart. Generally when I’m stuck between two body font faces I’ll go with the more readable option.

Single font face web designs are underrated

There’s a reason many very well designed sites and apps stick with one font; multiple font faces need to contrast against each other to play well. Also every font you add has to match the site’s mood or style. That can generate a lot more research and testing. When in doubt, or if design time is limited, stick with a single font face and play with font weights for proper contrast.

There is no one “proper” base font size

I still see web guides recommending a single font size as a base for body text like 12px or 14px. Times have changed: there’s a huge range (desktop, tablet, phone) in web connected devices, some of which appreciate a slightly bumped up font size. Custom font faces often look best one or two pixels bigger or smaller than you might first expect. Experiment. When debating between several sizes, pick one that fits roughly 45 to 75 characters per line (including spaces) to maximize readability.