How to choose web fonts

With online services offering a choice of thousands of fonts – plus the option to host your own – how do you decide which typefaces to use? Designers and type experts explain how to choose web fonts.

It’s easy to feel overwhelmed by the sheer choice offered by web-font services. But when faced with thousands of options, there are methods to rapidly filter a selection, in order to arrive at something suitable and appropriate for the website you’re creating.

“For me, choosing a typeface starts by thinking about the tone and voice of the project, and the task the user is there to perform,” explains designer at Dropbox, Dan Eden. “Type selection is technical in some respects, but it’s also touchy-feely,” he adds.

Typographer and teacher Indra Kupferschmid offers a similar line of thinking: “I first try to imagine what kind of atmosphere I want to convey, or what would fit the client or use case. For instance, do I want something very friendly and approachable, do I need something classy and elegant, or should it look more informal or technical?”

At this stage, she’s not even deciding on serif or sans-serif: “You can go in all these directions with either, and so I can decide to look for more humanist or more rational letterforms and proportions.”

Choices may be heavily informed by a client’s identity. “If a type system to support a brand is already in place, your decision should be easy,” suggests Monotype director Johnathan Zsittnik. “You might only need to choose an additional family – a serif or sans-serif counterpart to the design you’re working with, or something with a similar x-height and proportions.”

However, when starting from scratch – or, as Fresh Tilled Soil's lead UX strategist Jason Pamental suggests, when faced with “something very stylised that may not be appropriate for the web” – content becomes a bigger driver.

Choose web fonts for legibility first

In fact, some designers argue content should really be your first and main consideration regarding typeface selection.

“Readability is always my biggest concern when choosing web fonts,” says designer Laura Kalbag. Jason agrees, noting that “whatever you choose for body copy must be easy to read,” but says headings are “an opportunity to be a bit more expressive, and this is often where to use the typeface from the client’s logo or identity”.

When it comes to headings in general – and any other really big display type – Fontdeck CEO Richard Rutter says you can largely go with “whatever you want, because larger characters generally render fine on a big enough screen”. For body copy, though, [Webtype partner Roger Black recommends you “go for fonts that are tuned for small sizes,” noting that Webtype has a series of options that look great at 10px.

Laura expands on what to look for: “Find fonts with a generous x-height, uniform texture, and that distinguish the I, l and 1, to ensure text is easy to read. Remember to check the numbers as well – so often, you need numbers in an interface, and it’s annoying when you’ve a typeface that’s beautiful for text but that has jarring numbers.”

She also recommends at least considering the web-safe fonts many designers now clamour to avoid: “They’re so well-designed, and so anything you choose over and above them must be really great to be worth the trade-off in performance.”

Richard isn’t quite so sure, largely because of the increasing prevalence of Android: “If you rely on system fonts, you’ve only two typefaces to work with there: Droid and Roboto. There’s no way to distinguish between websites if everyone’s using them.” He concedes, though, that “the nature of the web remains that everything cannot be the same everywhere”.

Keep it simple

Regardless of your selection, Dan notes that paring down choices usually makes sense: “It’s absolutely possible to design with just one typeface – even just with one typeface in one size and a single weight. Those kinds of constraints are healthy.” Jason adds separate fonts for headings and copy “creates visual interest”, but then that “finding a relationship between them is important, so that they’ll work well together”.

If you’re still finding yourself stuck, wondering what the best starting point and approach is for whittling down a font selection, Richard suggests an efficient, direct route that can be effective. “Start with a shortlist of purely tactical considerations. What characters do you need? If you need Eastern European characters, for example, you’re going to weed out loads of free fonts, which tend to have smaller character sets, because designers haven’t spent time designing all the characters”.

Next, he suggests considering the weights and styles you require – maybe a regular, a bold and an italic, or perhaps a semi-bold or light weight. “That will reduce choices and push you in a direction – typically of a professional solution.”

Beyond subsequent practical considerations (aforementioned regular forms, if you want copy to be read and type that doesn’t call attention to itself), he moves on to more esoteric questions, but asked from a ‘negative’ point of view. Is the font saying the right thing? Would it give someone the right impression if everything was in lorem ipsum?

By this point, you should be some way to making a decision – or at least have a much smaller pool of options to choose from. These might be a mix of serif and sans-serif fonts, although Richard dismisses lingering concerns surrounding serif use on screens: “In the past, serifs rendered poorly, with bits and pieces of letterforms. But with higher-res screens and a welcome tendency to set text bigger than in the past, that tends to go away. So now it’s more about feel than practicality, and serifs are often perceived as more ‘serious’.”

Testing web fonts

A final tip is perhaps obvious, but worth stating nonetheless: test your choices. “If I already have an older version of a site up, or a similar one, I’ll use a ‘font swap tool’ like Webtype Font Swapper or FontShop’s WebFonter (above) to check how the site would look with other typefaces,” says Indra.

Alternatively, “make a sample page to try out your combinations, and ensure you test across browsers and operating systems,” says Jason. “Windows PCs and Macs render fonts very differently, and you really need to see how different they can be.”

This is an area in which web-font services can better self-hosting, in that they spend plenty of time trying to ensure fonts are properly optimised for the various platforms. Whatever the case, though, don’t sit there on a Mac and blithely assume everything will look amazing on Windows, tablet or phones, otherwise you could be in for a nasty shock – and a testy phone call from a previously happy client.

Note: We may earn a commission when you buy through links on our site, at no extra cost to you. This doesn't affect our editorial independence. Learn more.

Read Next...