Ever since @font-face was introduced, our web font choices have grown tremendously each year. Web font trend data can help us make sense of all those new choices—and give insight into which typefaces are working well on the web, and which might even be overused. Let’s explore where we can find data on what’s popular now, and how we can use that information.
Google Fonts
The most popular Google fonts can be sorted by total views. The drastic difference in pageviews of Open Sans is quite impressive: it’s viewed more than three times as often as any other font. Here are Google’s dominant three for the last 30 days:
- Open Sans
- Roboto
- Oswald
Fonts.com
The Fonts.com blog updates monthly with its list of most-popular fonts. Trade Gothic was its top family for February 2014, moving up from the number two spot a year ago. Over the last year, Avenir Next has grown in popularity, while Din Next has declined. Fonts.com’s top three in February were:
- Trade Gothic
- Avenir Next
- Neue Helvetica
Font Squirrel
Filtering by “Webfont” and sorting by “Popularity” will yield us Font Squirrel’s most popular for @font-face embedding. Its top three:
- GoodDog
- Quicksand
- Open Sans
Typekit
Typekit doesn’t share the most popular fonts by view, but by most favorited. When it released the favoriting functionality in 2011, Adelle was the most adored, but has since dropped down a spot. Futura PT was number two and is now number five. Typekit’s most favorited three are:
- Museo Sans
- Adelle
- Proxima Nova
Font Deck
Want to look at the most popular serif, sans-serif, or script? You can do that at Font Deck, along with sorting all font families by popularity. Its top three overall:
- Proxima Nova
- Apercu
- Bliss
FontSpring
All fonts on FontSpring have web licenses available. Whether its list of popular fonts takes that into consideration is a bit unclear, but we see some common font friends that we’ve seen before. Its bestselling in the last 30 days:
- Proxima Nova
- Museo Sans
- Museo
Webtype
Webtype has a nice advanced filtering section, including an “intended size” filter for finding your perfect small or large type sizes. Changing the default filtering from “Most Recent” to “Popularity” gives us these leaders:
- Gill Sans
- Benton Sans
- Ibis
There are plenty of other choices for serving or downloading web fonts from, but you can see with a bit of digging, we can learn a lot about what’s been working well for others.
Using the data
How can we put this information to work? Here are some examples from my own experience.
I worked on a website in which using any paid third-party services was prohibited, but the team was hesitant to use free web fonts because appearing professional was critical. Looking at how popular the sans-serif fonts Open Sans, PT Sans, and Source Sans were on Google Fonts gave us the confidence to use one of those in production.
Another project started with the use of Futura, a font that is common to these popular lists and had been used in a few of my recent projects. I wanted to try something new, so I used those same lists for inspiration and tried out some of the fonts a little further down in the popularity numbers, and it helped refresh the design.
There’s no one way to look at this data, though. Maybe the top fonts are popular because they have fabulous font hinting, or maybe because they’ve been used on influential sites. It’s up to you to interpret the trends in the context of your project’s needs and goals—but watching them can help inform your next font choices.
Thanks for this, a really useful list. I often use Typekit as part of their Creative Cloud package, and FontSquirrel is always a nice easy alternative. I have never noticed Webtype before but with Gill Sans webfont available I know a few designers and devs who will be jumping for joy!
Maybe Open Sans is popular on Google Fonts because Google uses it? It’d add a few hits, I would think.
Thanks to the folks at Font Squirrel for sending an updated link to their list of “Hottest Web Fonts”
Showing their top recent web fonts in the last 48 hours are
1. Open Sans
2. Source Sans Pro
3. Lato
With this app I built you can preview the above mentioned (an many other) google web fonts on your site easily: webtypetest.com. Hope that helps choosing the best font for your projects.
Thanks for the list and for the update of FontSquirrels “Hottest Web Fonts”. I couldn’t imagine that GoodDog is a often used font 0_o
One explanation for the popularity of Open Sans on Google Fonts is its use in the WordPress admin pages.
I still find web fonts to be a poor solution. The flicker on every page as default fonts swap out for web fonts when the page loads is seriously annoying. Designers seem to be more concerned about how it looks when it’s fully loaded than how it works when the site is actually being used.
Great article, Jenn. I run a side project called Typewolf that has font usage data as well. It’s a curated site so it’s not entirely scientific but here are the top 3 from Typewolf from the last year:
1. Apercu
2. Proxima Nova
3. Brandon Grotesque
You can see the top 50 here:
http://www.typewolf.com/all-fonts
Choosing a typeface based on its popularity should be extremely low on your list of reasons to pick it for a project.
This is only useful if you design by following the herd.
Sure, designers shouldn’t choose fonts based on popularity, but it makes the process that much easier as you see what web fonts are obviously better quality than others.
A quick look through Font Squirrel will show that not all of those fonts belong on your site.
Good article.
Popularity does not equal quality. A list of popular fonts does little to help you find good fonts that will suit your site and your client.
Hi Jenn! Thanks for gathering this information.
We’ve never publicly reported on font usage before, but we thought it would nice to share this data here informally to round out your article.
So, without getting too much into the specific methodology, these are the top five most-viewed fonts on Typekit, going by number of pageviews in the month of January 2014:
1) Proxima Nova from Mark Simonson
2) Myriad Pro from Adobe
3) Futura PT from Paratype
4) Nimbus Sans from URW++
5) Adelle Sans from TypeTogether
As an aside, Adobe’s own proprietary brand font, Adobe Clean, is used throughout Adobe.com and many other of our own web sites. If we counted it, Adobe Clean would be number 2 on this list.
In addition to the WordPress admin which Dan mentioned, Open Sans is the default font throughout WordPress.com, and they’re using the Google font CDN. WordPress.* plus Google probably makes up an awfully large percentage of usage.
Does the top 3 most popular fonts from each web service tell us anything about type trends?
That’s like looking at the top 3 pop songs on billboard and trying to deduce the next big sound in music. These typefaces have all been widely used, and are right in the middle of the adoption curve, which means the progressive designers are already sick of them.
Just sayin’ 🙂
Thanks for the list. There are some pretty good free web fonts available nowadays. I just want to say that while I don’t think web fonts are necessarily bad or can’t provide some benefit to a site, I’m noticing more and more often how websites are using too many of them and it’s taking a long time for sites to load up the text. You’ll see a page load up with no text because the fonts are still downloading. That’s a really horrible user experience in my humble opinion. There can be a certain benefit to a brand to use a unique font, but generally I think the focus should be on improving the overall user experience first. Default fonts that are available in 99% of browsers can still be arranged beautifully if you’re skilled. Rather than focus on branding or aesthetics, or even promotion like buying likes (see BuyFacebookLikesReviews for instance) I think more businesses should look at improving the general UX and page loading speed. That has more of a positive effect on commerce than just about anything else that I’ve seen. Designers don’t always want to hear that, but fast beats slow every time.
Perhaps some of the numbers are reflective of web fonts that are reliable and standup across different devices and screens.
Aesthetics and trends aside, in my experience it has been handy to keep a running list of web fonts that maintain a consistent, predictable quality across the swamp of screens.
Hi Jenn
“The most popular Google fonts can be sorted by total views. The drastic difference in pageviews of Open Sans is quite impressive: it’s viewed more than three times as often as any other font. ”
That’s rather impressive and would certainly push me towards giving it a try.
imho you should stay well away from good dog @fontsquirrel. This article is about popular fonts, which does not per se mean great fonts. For Google fonts Alegreya and Mate are two gems often missed. Open sans and open sans condensed are pretty special, but if they were over used that would be a problem. Source sans pro is also an incredibly useful sans serif. All the fonts I mention here are available on Google fonts.
Alice,
Web fonts are specifically made…for the web. The way it loads has nothing to do with the type itself.
I use a Google web font on one of my sites yet, ironically, the browser that font displays worst in is Chrome.
Hi Jenn,
Great article. We’d like to mention that WebINK.com is a well-established provider of web fonts amongst the set you noted above.
Carefully procured library of foundries with 6,000+ fonts. WebINK has an awesome enterprise offering, with a global cloud-based server distribution network, for fast download speeds and super reliable font delivery. http://www.webink.com/enterprise-plans/
Here are our top five most popular fonts on WebINK search:
http://blog.webink.com/top-5-most-popular-webfonts-on-webink-search/
And, here are our most popular fonts of 2013.
http://blog.webink.com/popular-webink-web-fonts-2013/
Free developer account, too!
Thanks a lot Font Squirrel for list of “Hottest Web Fonts”
1. Open Sans
2. Source Sans Pro
3. Lato
I wanted to thank.
Great article i am thanks to Website design and Web development services Dubai UAE that make my website by using some of fonts that listed above
Great choices of fonts you have here.
I can use this referrention article for updating my web banner design.
I hope it would refreshing the look of my web.
Thank you so much 🙂
Toko online | Jual – Service Laptop dan Aksesoris Komputer
http://www.sodagarkomputer.com
Great choices of fonts you have here.
I can use this referrention article for updating my web banner design.
I hope it would refreshing the look of my web.
Thank you so much 🙂
Toko online | Jual – Service Laptop dan Aksesoris Komputer
sodagarkomputer.com
Thanks for this