20 top web fonts

Looking for a web font suitable for your designs? Some of these popular choices from last year may be just what you're after...

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.

01. Open Sans

Design blog The Fox is Black makes full use of free font Open Sans
  • 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.

02. Aktiv Grotesk

Top 20 web fonts of 2013

Aktiv Grotesk was designed to provide an alternative to Helvetica
  • 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.

03. Merriweather

Top 20 web fonts of 2013

Merriweather is used to great effect in net magazine's stunning iPad edition
  • 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.

04. Proxima Nova

Top 20 web fonts of 2013

Australian clothing site The Iconic is one of many sites using Proxima Nova
  • 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 and at Australian clothing site The Iconic, and many, many more sites. A real favorite of 2013.

05. Lato

Top 20 web fonts of 2013

Lato is an extremely popular and free Google web font
  • 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 has done. It also works well with the likes of Abel an example of which you can see at biglazyrobot.com

06. Roboto

Top 20 web fonts of 2013

Roboto is largely geometric but with friendly and open curves
  • 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 for its excellent Nexus 5 smartphone. You'll also see it used extensively on design agency R&Co's slick portfolio site.

07. Brandon Grotesque

Top 20 web fonts of 2013

Many designers use Brandon Grotesque for their portfolio sites, including Ben the Illustrator
  • 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, New Future Graphic and Ben the Illustrator.

08. Montserratt

This font design was inspired by old posters and signs in Buenos Aires neighbourhood Montserrat
  • 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 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.

09. Avenir

Top 20 web fonts of 2013

Bristol-based design agency Beef uses Avenir nicely on its portfolio site
  • 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 uses it nicely on its portfolio site as does Kerem Suer, the latter designer pairing it with Merriweather to great effect.

10. Maison Neue

Top 20 web fonts of 2013

Maison Neue is put to great use on Mike Sullivan's portfolio site - Studio Mister
  • 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. In addition, if you're interested in reading more, here's an excellent review of the typeface.

11. Futura

Top 20 web fonts of 2013

Futura is a modern classic
  • 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.

12. Effra

Top 20 web fonts of 2013

Effra is a clean and versatile font
  • 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.

13. Inconsolata

Top 20 web fonts of 2013

Inconsolata can add a stylised, modern feel to a portfolio or gallery site

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 and used more subtly in the portfolio site of Jeremiah Shoaf.

14. Fakt Pro

Top 20 web fonts of 2013

Designed by Thomas Thiemich, Fakt is a highly functional sans serif
  • 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) "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.

15. Sofia Pro

Top 20 web fonts of 2013

Sofia Pro has 16 fonts in total, so can be used across a whole site with ease

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) 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.

16. PT Serif

Top 20 web fonts of 2013

PT Serif is a brilliant free web font that's perfect for reams of text
  • 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.

17. Adelle

Top 20 web fonts of 2013

Offscreen magazine uses Adelle in its navigation
  • 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 uses it in its navigation, and you'll spot it in the body text and sub-heads of the excellent Kern and Burn.

18. Theinhardt

Top 20 web fonts of 2013

Theinhardt is a hugely versatile, neo-grotesque sans serif for use on the web
  • 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. You'll also find it paired with Clarendon on design agency Hello Monday's site.

19. Omnes

Top web fonts of 2013

Eventbrite uses Omnes to great effect
  • 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 uses Omnes to great effect - showing the typeface's onscreen legibility and subtle design details.

20. Aperçu

Top web fonts of 2013

Aperçu is a typeface designed by Brighton-based design and typography studio The Entente
  • 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 and Swedish design agency site Kod & Form.

Words: Rob Carney

In writing this feature, we've used the excellent Typewolf 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 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 has also been particularly helpful, and finally, we've used the useful WhatFont Safari Extension to identify webfonts.

Like this? Read these!

Have we missed any top web fonts? Let us know in the comments below.