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.

Could Netflix’s programming strategy kill the golden age of TV? →

The A.V. Club‘s Todd VanDerWerff:

But I’ll still miss the idea of everybody watching everything together. With every new freedom comes a kind of loss, and sometimes, those can’t be quantified. We’ve been consuming content in serialized fashion for centuries now—people made weekly visits to theaters long before the novel was even a glint in Cervantes’ eye—and that habit will likely die hard. And maybe I’m being a stick-in-the-mud here, tied to a method of TV watching that was already in its death throes when I was a child. But when I can watch a great episode of TV with my watercooler—real or virtual—around me, that increases the value of it to me, increases the sense that I’m a part of something.

Jeffery Harrell on ‘Primer’ →

This is a long, long read, but it’s the smartest breakdown I’ve read of what’s really going on in Shane Carruth’s cult time travel film. Makes the wait for Upstream Color a lot harder.

Jason Santa Maria – ‘On Web Typography’ →

I really enjoyed watching Jason’s talk. He starts out illustrating how the right font face matters. Pay special attention to last twenty or so minutes where he runs through a few quick tips on font selection (e.g. when in doubt between two font sizes, bigger is better.)

Analysis of ‘Blade Runner’ →

If you’ve got twelve minutes and dig science fiction films, watch this Vimeo video essay by Steven Benedict. It jumps around in its coverage, but on a surface level it illustrates why Blade Runner still holds up as one of my favorite films.

Why “House of Cards” could signal the decline of cable television →

Columbia professor Tim Wu, writing for The New Yorker:

That doesn’t mean the cable industry has no prospects. But this year or next, cable companies will have to accept that they are no longer the gatekeepers for the best content. It means, eventually, that the industry will probably have to embrace the idea of simply carrying the content of others (which was its original business model), and essentially function as what used to be called an “Internet-service provider.”

Wu is a very smart guy, and his points about the potential impact of House of Cards are argued well. But I’m not as optimistic that the ‘best content’ will move as rapidly away from cable as he predicts.

How Valve’s Steam Box will reinvent the game console as you know it →

You can read endless speculation on Valve’s upcoming Steam box on almost any gaming or tech site. But for a one stop, comprehensive look on what we really know, T.C. Sottek piece over at The Verge is stellar. If you’re at all mildly interesting in the future of gaming you should read this piece.

Where to start →

Paravel founder Trent Walton on the transition to building responsive web sites properly:

I believe this starts with a shift in perception. Whether massive or minute, this shift usually involves letting go of a lot of assumptions that center around desktop-centric browsing.

I found myself nodding a lot to Trent’s post. There’s no one simple solution for implementing responsive web design, but trying to just take an existing desktop workflow (e.g. fixed width psd comps, jamming a few CSS media queries on existing work) won’t do it justice.

How I launched 3 consoles (and found true love) at Babbage’s store no. 9 →

I couldn’t put it better than Ars Technica writer Lee Hutchinson’s own tag line: a minimum wage gig in the 1990s turns into pretty much the Best Job Ever. Fun read and makes me a bit nostalgic for those earlier days of gaming in my teenage years.

MQtest.io →

Sometimes you want a super quick way to both identify core dimensions on your open web browser and, especially for mobile devices, what critical dimensions like device width, height, and pixel ratio should be. That’s exactly what this web site does; bookmark it and keep it for reference later.