Here we bring you our list of the top 20 web fonts of last year. All of these fonts have been used extensively across not only design-related sites, but also those focusing on news, features, e-commerce and contemporary culture.
This list contains both open source free fonts and commercial typefaces - bear in mind that Google fonts tend to be popular for the very reason they are free, but nevertheless there are some real quality fonts on offer. Need more? See our list of top free fonts for designers.
01. Open Sans (opens in new tab)
- Price: Free
According to Google, Open Sans is 'a humanist sans serif typeface'. It was designed by Steve Matteson, Type Director of Ascender Corp in 2011. Version 2 has the complete 897 character set.
Even though it's a free font, it's perfect for web and mobile usage - being extremely legible at all sizes and friendly in appearance. See it in use at the likes of Virgin.com and design blog The Fox is Black (opens in new tab).
02. Aktiv Grotesk (opens in new tab)
- Price: From £35 per weight (£403.20 for family)
Aktiv Grotesk is a beautiful sans serif, designed collaboratively at renowned studio Dalton Maag. The font itself was designed to provide an alternative to Helvetica.
Maag told Creative Review in an interview: "We wanted to have a grotesk font positioned somewhere between Helvetica and Univers - not as icy cold as Univers but devoid of all the quirks of Helvetica. To have a font that is beautifully crafted, spaced well, with not a chink in a curve or anything - perfectly drawn but hopefully with a bit of personality." See it used wonderfully on the English National Ballet website (opens in new tab).
03. Merriweather (opens in new tab)
- Price: Free
Merriweather is another Google web font, designed by Eben Sorkin. It was designed to be a body text face that is easy to read on screen at any size.
The great thing is, as well as being Regular, Light, Bold, and Black, there's italic styles in each of these weights (an addition made in May 2013). This all makes it very versatile. It's used to great effect in net magazine's stunning iPad edition (opens in new tab).
04. Proxima Nova (opens in new tab)
- Price: From $29 per weight
Proxima Nova is a complete reworking of the 1994 font Proxima Sans. There are three widths: Proxima Nova, Proxima Nova Condensed, and Proxima Nova Extra Condensed. Each width consists of 14 fonts - seven weights with matching italics.
Humanist proportions meet a geometric appearance in this widely-used web font. You can see it in action on stefivanov.com (opens in new tab) and at Australian clothing site The Iconic (opens in new tab), and many, many more sites. A real favorite of 2013.
05. Lato (opens in new tab)
- Price: Free
Designed by Łukasz Dziedzic, Lato is an extremely popular - and indeed free - Google web font that consists of five weights (including italics). Lato is highly legible at any size, and with a lovely Thin 100 weight.
The fact that there are so many weights makes it a great choice to use across an entire site - just like the team at Etch (opens in new tab) has done. It also works well with the likes of Abel (opens in new tab) an example of which you can see at biglazyrobot.com
06. Roboto (opens in new tab)
- Price: Free
Roboto - according to Google - has a 'dual nature' being largely geometric but with friendly and open curves. Roboto is nothing but legible, and paired with Roboto Condensed and Roboto Slab, it's a smart, versatile, and rightly much-used web font.
Want to see it in action? Head over to Google's own site (opens in new tab) for its excellent Nexus 5 smartphone. You'll also see it used extensively on design agency R&Co's slick portfolio site (opens in new tab).
07. Brandon Grotesque (opens in new tab)
- Price: £152 (12 fonts)
Brandon Grotesque is a hugely successful font by HVD Fonts (run by the excellent type designer Hannes von Döhren). According to the designer, the font is influenced by the geometric-style sans serif faces that were popular during the 1920s and 30s.
By coupling Brandon Grotesque for headlines with Brandon Text for body, you have a stylish solution for clean, crisp portfolio sites. See it in use at the portfolio sites of Jack Hughes (opens in new tab), New Future Graphic (opens in new tab) and Ben the Illustrator (opens in new tab).
08. Montserratt (opens in new tab)
- Price: Free
Montserrat is a family of fonts designed by Julieta Ulanovsky - one half of design agency ZkySky. It was actually funded by a Kickstarter campaign (opens in new tab) and is distributed for free via Google Fonts.
"The old posters and signs in the traditional neighbourhood of Buenos Aires called Montserrat inspired me to design a typeface that rescues the beauty of urban typography from the first half of the twentieth century," says the designer. Pick it up in Regular, Alternates and Subrayada. See it in action at design blog Digital Abstracts (opens in new tab).
09. Avenir (opens in new tab)
- Price: £26 per weight per 250,000 page views (via MyFonts)
Avenir was designed back in 1988 by renowned type designer Adrian Frutiger (he designed, amongst many others, Univers, Versailles and of course the eponymous Frutiger).
Avenir means 'future' in French and is as hugely popular as a web font as it is in print - and it works well in both body text and headlines. Bristol-based design agency Beef (opens in new tab) uses it nicely on its portfolio site as does Kerem Suer (opens in new tab), the latter designer pairing it with Merriweather to great effect.
10. Maison Neue (opens in new tab)
- Price: $15 per weight per year
According to its foundry - the Swiss MillieuGrotesque - Maison Neue' is the thoroughly reworked version of its early 'Maison' typeface family. Meticulously redrawn and 'paying attention to harmony, rhythm and flow' the Timo Gaessner-designed typeface is undoubtedly a contemporary grotesque - and is certainly highly legible with a friendly, elegant appearance.
You'll find it put to great use on Mike Sullivan's superb portfolio site - Studio Mister (opens in new tab). In addition, if you're interested in reading more, here's an excellent review of the typeface (opens in new tab).
11. Futura (opens in new tab)
- Price: £130.91 (via MyFonts)
It's a modern classic, it's a fact. And in 2013, Futura saw a resurgence (although it never really went away). Futura was designed back in 1927 by Paul Renner, and you probably recognise it as Volkwagen's advertisement font. And it works beautifully on independent magazine site The Gentlewoman (opens in new tab).
12. Effra (opens in new tab)
- Price: $24.99 per year WebINK subscription (up to 20,000 unique visitors per month)
Another Dalton Maag typeface - this time designed by Jonas Schudel. Effra has its roots in Caslon Junior - an early sans serif designed in 1816.
According to MyFonts 'while it is not strictly a font intended for setting body copy, the resulting family does function well at text sizes'. Effra is a clean and versatile font with subtle spacing and 'humanist design details'. Nice usage of Effra at social audience intelligence service Intent HQ (opens in new tab).
13. Inconsolata (opens in new tab)
Price: Free
A monospace font, designed for printed code listings, Inconsolata can also add a stylised, modern feel to a portfolio or gallery site (and monospaced fonts have been incredibly popular recently).
According to the designer, Raph Levien, "I was particularly struck by the beauty of Lucas de Groot's Consolas." See it in action - and beautifully so - at web design agency Dow Smith's site (opens in new tab) and used more subtly in the portfolio site of Jeremiah Shoaf (opens in new tab).
14. Fakt Pro (opens in new tab)
- Price: Subscription prices from $24.99 per year through WebINK
Fakt was designed by Thomas Thiemich and is a highly functional sans serif. According to the designer (see https://ourtype.com (opens in new tab)) "Fakt is a child of its time, offering choices efficiently and in an accessible way. It is a well behaved child but also a clever one, respectful of its sans serif parents while bringing them new joy."
Fakt has ten weights of roman and italic, all built around three widths. Fakt shows its versatility in the extensive use at shopping loyalty site Marqeta (opens in new tab).
15. Sofia Pro (opens in new tab)
Price: £183 (via MyFonts)
Redesigned in 2012 by Olivier Gourvat, this typeface now supports a wide range of languages with more than 500 glyphs. Sofia Pro (not to be confused with the Google font, Sofia (opens in new tab)) has 16 fonts in total, so can be used across a whole site with ease.
Lots of nods to Futura, but a really clean, classic typeface. Interesting fact, it was used as the font for the 85th Academy Awards (2013). You can see it in use at fashion house Muuse (opens in new tab).
16. PT Serif (opens in new tab)
- Price: Free
Designed by ParaType, PT Serif is a brilliant free web font that's perfect for reams of text - it's brilliantly legible at any size. Pair it with PT Sans for maximum flexibility.
According to Google, the family 'consists of six styles: regular and bold weights with corresponding italics form a standard font family for basic text setting; two caption styles in regular and italic are for use in small point sizes'. See it in use in Computer Arts' brilliant iPad edition (opens in new tab).
17. Adelle (opens in new tab)
- Price: Subscription prices from $24.99 per year through WebINK.
Adelle is a fantastic example of a slab serif for editorial use - it was specifically designed for newspapers and magazines by foundry Type Together. But as well as in print, Adelle renders brilliantly on screen with eight of its styles optimised for low resolution rendering.
If you're looking for it in action, Offscreen magazine (opens in new tab) uses it in its navigation, and you'll spot it in the body text and sub-heads of the excellent Kern and Burn (opens in new tab).
18. Theinhardt (opens in new tab)
- Price: Subscription prices from $24.99 per year through WebINK.
Whilst this font from Swiss foundry Optimo may be most famous for adorning the cover of the New York Times Magazine, Theinhardt is a hugely versatile, neo-grotesque sans serif for use on the web - with 18 styles from Hairline to Black (meaning it's just as good for body text as it is for headlines and navigation elements).
See it used in a brilliant way on the catalogue site of Swiss art book publisher Edition Patrick Frey (opens in new tab). You'll also find it paired with Clarendon on design agency Hello Monday (opens in new tab)'s site.
19. Omnes (opens in new tab)
- Price: Subscription prices from $24.99 per year through WebINK.
Josh Darden of Darden Studio designed Omnes in 2010. Rounded terminals; quirky yet not too quirky; legible and with a wide range of weights and italics - it all adds up to Omnes being a very useful font for a wide range of online purposes.
Eventbrite (opens in new tab) uses Omnes to great effect - showing the typeface's onscreen legibility and subtle design details.
20. Aperçu (opens in new tab)
- Price: $12.50 per weight per year (via Fontdeck)
Aperçu is a typeface designed by Brighton-based design and typography studio The Entente. The studio, run by Anthony Sheret and Edd Harrington, originally created Aperçu in 2009 as an 'amalgamation' or 'summary' (hence the name) of classic realist typefaces: Johnston, Gill Sans, Neuzeit and Franklin Gothic.
You can see Aperçu in use on YCN (opens in new tab) and Swedish design agency site Kod & Form (opens in new tab).
Words: Rob Carney
In writing this feature, we've used the excellent Typewolf (opens in new tab) as reference for some of the sites and web fonts featured. Make sure you check it out and bookmark it - it's a fantastic way to find out what Webfonts are used on different sites (and indeed the popularity of webfonts).
Extensis' useful blog post (opens in new tab) at was also a great help - although that list is simply the company's most popular fonts (i.e. those that sold well). The brilliant Fonts In Use (opens in new tab) has also been particularly helpful, and finally, we've used the useful WhatFont Safari Extension (opens in new tab) to identify webfonts.
Like this? Read these!
- Top typography tutorials (opens in new tab)
- The best typography resources - click here
- What is type? Learn the basic rules and terms of type (opens in new tab)!
Have we missed any top web fonts? Let us know in the comments below.
