Skip to main content

Top 20 fonts for the web

Top 20 fonts for the web
Typekit's tiered service includes font packages for personal and professional sites, with different libraries

To say that right now is an exciting time for web typography is to make something of an understatement.

Recent technological leaps and bounds have brought us one step closer to typographical nirvana on the web, and it's a step that's been an awfully long time coming.

The freedom to use typefaces beyond the 'web safe' fonts installed on most systems has come about largely thanks to three major and near-simultaneous technological factors: firstly, the widespread support for @font-face in browsers; secondly, the emergence of font delivery services such as Typekit and Fontdeck; and thirdly, the development of a new font format – the humble WOFF file – to address many of the foundries' privacy concerns.

But with great power comes great responsibility. Just because we can choose from a vast library of typefaces doesn't mean we have to; there's something to be said for painting with a limited palette. Not only that, but there are a lot of sub-standard fonts out there, and with many of them being free, their usage is often widespread but undeserved.

In fact, this is part of a much larger problem: the misconception – particularly within the web design community – that fonts aren't worth paying for. This is damaging for both the worldwide network of talented type designers and the design community as a whole.

A typeface, like any form of design, is created by craftsmen over a substantial period of time, using the talent and experience they've been honing for many years. The benefits of a professionally designed font — various weights and styles to form a complete family, carefully considered kerning pairs, multi-language support with international characters, expressive alternate glyphs to add character and variety to type-setting — are very rarely found in a font available for free.

It's for this reason that we've focused almost entirely on 20 fonts that require some sort of purchase, although many of the Typekit-served fonts are available within their free package.

Font squirrel

We've also focused primarily on typefaces that work well for the relatively small body type we use regularly on the web, rather than display faces more suited to very large headings. So turn over and discover 20 typefaces you'll want to use again and again…

20. Avenir
Classification: Sans serif
Designer: Adrian Frutiger

Avenir's design is based upon the ubiquitous Futura (which was designed as 'Die Schrift für die Neue Zeit' – 'the typeface for the New Time'), but Avenir is described by designer Adrian Frutiger as having a more human touch.

Despite its popularity as a corporate typeface, it's a well-rounded geometric sans with a subtle personality that adds a friendly smile to serious content.

Several years later, Akira Kobayashi completed Avenir Next, which refined the original and added italics and small caps.

19. FF Kava
Classification: Sans serif
Designer: Yanone

When Kaffeesatz was released for free around the time browser support for @font-face became more prevalent, it found popularity among many web designers and brought designer Yanone to the attention of FontShop FSI, who commissioned him to produce a professional version of the typeface.

Rather than simply adding extra glyphs to the font, it was completely redrawn from the ground up, keeping much of its character but including features such as a black weight, small caps and international language support. The result is FF Kava.

18. Times New Roman
System font
Classification: Serif
Designer: Victor Lardent, Stanley Morison

As strange as it may seem to list a system font associated with the world of Word documents and suits who can't be bothered to change the defaults, Times New Roman is a surprisingly robust typeface when given a little TLC.

The 2008 Seed Conference website made particularly good use of Times by giving it the feel of a display face. Simon Collison, a designer known for his appreciation of Times's flexibility and use of it on his personal site, says that "it actually feels quite good to be taking a tired old typeface and trying to squeeze every possible ounce from it".