There are over 1,200 font families available on Typekit. Anyone with a Typekit plan can freely use any of those typefaces, and yet we see the same small selection used absolutely everywhere on the web. Ever wonder why?
The same phenomenon happens with other font services like Google Fonts and MyFonts. Google Fonts offers 708 font families, but we can’t browse the web for 15 minutes without encountering Open Sans and Lato. MyFonts has over 20,000 families available as web fonts, yet designers consistently reach for only a narrow selection of those.
On my side project Typewolf, I curate daily examples of nice type in the wild. Here are the ten most popular fonts from 2015:
- Futura
- Aperçu
- Proxima Nova
- Gotham
- Brown
- Avenir
- Caslon
- Brandon Grotesque
- GT Walsheim
- Circular
And here are the ten most popular from 2014:
- Brandon Grotesque
- Futura
- Avenir
- Aperçu
- Proxima Nova
- Franklin Gothic
- GT Walsheim
- Gotham
- Circular
- Caslon
Notice any similarities? Nine out of the ten fonts from 2014 made the top ten again in 2015. Admittedly, Typewolf is a curated showcase, so there is bound to be some bias in the site selection process. But with 365 sites featured in a year, I think Typewolf is a solid representation of what is popular in the design community.
Other lists of popular fonts show similar results. Or simply look around the web and take a peek at the CSS—Proxima Nova, Futura, and Brandon Grotesque dominate sites today. And these fonts aren’t just a little more popular than other fonts—they are orders of magnitude more popular.
When it comes to typefaces, the rich get richer#section2
I don’t mean to imply that type designers are getting rich like Fortune 500 CEOs and flying around to type conferences in their private Learjets (although some type designers are certainly doing quite well). I’m just pointing out that a tiny percentage of fonts get the lion’s share of usage and that these “chosen few” continue to become even more popular.
The rich get richer phenomenon (also known as the Matthew Effect) refers to something that grows in popularity due to a positive feedback loop. An app that reaches number one in the App Store will receive press because it is number one, which in turn will give it even more downloads and even more press. Popularity breeds popularity. For a cogent book that discusses this topic much more eloquently than I ever could, check out Nicholas Taleb’s The Black Swan.
But back to typefaces.
Designers tend to copy other designers. There’s nothing wrong with that—designers should certainly try to build upon the best practices of others. And they shouldn’t be culturally isolated and unaware of current trends. But designers also shouldn’t just mimic everything they see without putting thought into what they are doing. Unfortunately, I think this is what often happens with typeface selection.
How does a typeface first become popular, anyway?#section3
I think it all begins with a forward-thinking designer who takes a chance on a new typeface. She uses it in a design that goes on to garner a lot of attention. Maybe it wins an award and is featured prominently in the design community. Another designer sees it and thinks, “Wow, I’ve never seen that typeface before—I should try using it for something.” From there it just cascades into more and more designers using this “new” typeface. But with each use, less and less thought goes into why they are choosing that particular typeface. In the end, it’s just copying.
Or, a typeface initially becomes popular simply from being in the right place at the right time. When you hear stories about famous YouTubers, there is one thing almost all of them have in common: they got in early. Before the market is saturated, there’s a much greater chance of standing out; your popularity is much more likely to snowball. A few of the most popular typefaces on the web, such as Proxima Nova and Brandon Grotesque, tell a similar story.
The typeface Gotham skyrocketed in popularity after its use in Obama’s 2008 presidential campaign. But although it gained enormous steam in the print world, it wasn’t available as a web font until 2013, when the company then known as Hoefler & Frere-Jones launched its subscription web font service. Proxima Nova, a typeface with a similar look, became available as a web font early, when Typekit launched in 2009. Proxima Nova is far from a Gotham knockoff—an early version, Proxima Sans, was developed before Gotham—but the two typefaces share a related, geometric aesthetic. Many corporate identities used Gotham, so when it came time to bring that identity to the web, Proxima Nova was the closest available option. This pushed Proxima Nova to the top of the bestseller charts, where it remains to this day.
Brandon Grotesque probably gained traction for similar reasons. It has quite a bit in common with Neutraface, a typeface that is ubiquitous in the offline world—walk into any bookstore and you’ll see it everywhere. Brandon Grotesque was available early on as a web font with simple licensing, whereas Neutraface was not. If you wanted an art-deco-inspired geometric sans serif with a small x-height for your website, Brandon Grotesque was the obvious choice. It beat Neutraface to market on the web and is now one of the most sought-after web fonts. Once a typeface reaches a certain level of popularity, it seems likely that a psychological phenomenon known as the availability heuristic kicks in. According to the availability heuristic, people place much more importance on things that they are easily able to recall. So if a certain typeface immediately comes to mind, then people assume it must be the best option.
For example, Proxima Nova is often thought of as incredibly readable for a sans serif due to its large x-height, low stroke contrast, open apertures, and large counters. And indeed, it works very well for setting body copy. However, there are many other sans serifs that fit that description—Avenir, FF Mark, Gibson, Texta, Averta, Museo Sans, Sofia, Lasiver, and Filson, to name a few. There’s nothing magical about Proxima Nova that makes it more readable than similar typefaces; it’s simply the first one that comes to mind for many designers, so they can’t help but assume it must be the best.
On top of that, the mere-exposure effect suggests that people tend to prefer things simply because they are more familiar with them—the more someone encounters Proxima Nova, the more appealing they tend to find it.
So if we are stuck in a positive feedback loop where popular fonts keep becoming even more popular, how do we break the cycle? There are a few things designers can do.
Strive to make your brand identifiable by just your body text#section4
Even if it’s just something subtle, aim to make the type on your site unique in some way. If a reader can tell they are interacting with your brand solely by looking at the body of an article, then you are doing it right. This doesn’t mean that you should completely lose control and use type just for the sole purpose of standing out. Good type, some say, should be invisible. (Some say otherwise.) Show restraint and discernment. There are many small things you can do to make your type distinctive.
Besides going with a lesser-used typeface for your body text, you can try combining two typefaces (or perhaps three, if you’re feeling frisky) in a unique way. Headlines, dates, bylines, intros, subheads, captions, pull quotes, and block quotes all offer ample opportunity for experimentation. Try using heavier and lighter weights, italics and all-caps. Using color is another option. A subtle background color or a contrasting subhead color can go a long way in making your type memorable.
Don’t make your site look like a generic website template. Be a brand.
Dig deeper on Typekit#section5
There are many other high-quality typefaces available on Typekit besides Proxima Nova and Brandon Grotesque. Spend some time browsing through their library and try experimenting with different options in your mockups. The free plan that comes with your Adobe Creative Cloud subscription gives you access to every single font in their library, so you have no excuse not to at least try to discover something that not everyone else is using.
A good tip is to start with a designer or foundry you like and then explore other typefaces in their catalog. For example, if you’re a fan of the popular slab serif Adelle from TypeTogether, simply click the name of their foundry and you’ll discover gems like Maiola and Karmina Sans. Don’t be afraid to try something that you haven’t seen used before.
Dig deeper on Google Fonts (but not too deep)#section6
As of this writing, there are 708 font families available for free on Google Fonts. There are a few dozen or so really great choices. And then there are many, many more not-so-great choices that lack italics and additional weights and that are plagued by poor kerning. So, while you should be wary of digging too deep on Google Fonts, there are definitely some less frequently used options, such as Alegreya and Fira Sans, that can hold their own against any commercial font.
I fully support the open-source nature of Google Fonts and think that making good type accessible to the world for free is a noble mission. As time goes by, though, the good fonts available on Google Fonts will simply become the next Times New Romans and Arials—fonts that have become so overused that they feel like mindless defaults. So if you rely on Google Fonts, there will always be a limit to how unique and distinctive your brand can be.
Try another web font service such as Fonts.com, Cloud.typography or Webtype#section7
It may have a great selection, but Typekit certainly doesn’t have everything. The Fonts.com library dwarfs the Typekit library, with over 40,000 fonts available. Hoefler & Co.’s high-quality collection of typefaces is only available through their Cloud.typography service. And Webtype offers selections not available on other services.
Self-host fonts from MyFonts, FontShop or Fontspring#section8
Don’t be afraid to self-host web fonts. Serving fonts from your own website really isn’t that difficult and it’s still possible to have a fast-loading website if you self-host. I self-host fonts on Typewolf and my Google PageSpeed Insights scores are 90/100 for mobile and 97/100 for desktop—not bad for an image-heavy site.
MyFonts, FontShop, and Fontspring all offer self-hosting kits that are surprisingly easy to set up. Self-hosting also offers the added benefit of not having to rely on a third-party service that could potentially go down (and take your beautiful typography with it).
Explore indie foundries#section9
Many small and/or independent foundries don’t make their fonts available through the major distributors, instead choosing to offer licensing directly through their own sites. In most cases, self-hosting is the only available option. But again, self-hosting isn’t difficult and most foundries will provide you with all the sample code you need to get up and running.
Here are some great places to start, in no particular order:
- Colophon
- Commercial Type
- Lineto
- Grilli Type
- Milieu Grotesque
- Klim
- Swiss Typefaces
- Optimo
- Frere-Jones Type
What about Massimo Vignelli?#section10
Before I wrap this up, I think it’s worth briefly discussing famed designer Massimo Vignelli’s infamous handful-of-basic-typefaces advice (PDF). John Boardley of I Love Typography has written an excellent critique of Vignelli’s dogma. The main points are that humans have a constant desire for improvement and refinement; we will always need new typefaces, not just so that brands can differentiate themselves from competitors, but to meet the ever-shifting demands of new technologies. And a limited variety of type would create a very bland world.
No doubt there were those in the 16th century who shared Vignelli’s views. Every age is populated by those who think we’ve reached the apogee of progress… Vignelli’s beloved Helvetica, . . . would never have existed but for our desire to do better, to progress, to create.
Are web fonts the best choice for every website?#section11
Not necessarily. There are some instances where accessibility and site speed considerations may trump branding—in that case, it may be best just to go with system fonts. Georgia is still a pretty great typeface, and so are newer system UI fonts likes San Francisco, Roboto/Noto, and Segoe.
But if you’re working on a project where branding is important, don’t ignore the importance of type. We’re bombarded by more content now than at any other time in history; having a distinctive brand is more critical than ever.
90 percent of design is typography. And the other 90 percent is whitespace.
As designers, ask yourselves: “Is this truly the best typeface for my project? Or am I just using it to be safe, or out of laziness? Will it make my brand memorable, or will my site blend in with every other site out there?” The choice is yours. Dig deep, push your boundaries, and experiment. There are thousands of beautiful and functional typefaces out there—go use them!
Excellent advice and resources on typography for the web. Thank you Jeremiah.
Great article. Well thought through and well written. It’s true: there are so many great and versatile typefaces, yet just a handful go mainstream. Result: missed opportunities to stand out and draw extra attention to your content. Hope designers (and site-owners) are inspired by this article to experiment more with type.
I think a great deal of the same reuse of typefaces comes from known quality. I know i’ve found a cool font and tried to use it, only to realize it has bad character support or weird kerning when used on the web — or even worse (and all too common–i swear no one checks these things on windows machines), bizarre cross browser compatibility on google fonts… Do you have some suggestions on good, quality typefaces, particularly on google fonts, that are underused but excellent? I’d love to find some, but i just don’t have time to test them all out.
Your article made me think about something I’ve never thought about. Thank you 🙂
I recently noticed the popularity and widespread use of Lineto’s Circular, and considered using it myself, but so far I have not found a web font service that offers Circular in their catalog. Upon further investigation I discovered many sites are self-hosting Circular, yet at the almost $1,000 price tag for a basic web use license from Lineto, I find it very hard to believe that the typeface is being used legally on most sites. Are web designers just pirating Circular or is there a more affordable licensing alternative that I have overlooked?
Hi dot,
Fira Sans, Alegreya, Work Sans and Source Sans Pro are excellent options if you are using Google Fonts. I have a list of my 30 favorites here.
Hi Imar,
As far as I know, Circular is only available for self-hosting through Lineto. Piracy is definitely a huge problem. And getting caught pirating fonts happens all the time. I’ve seen many sites being called out publicly on Twitter for not properly licensing fonts. Good type is worth it, so $1,000 isn’t bad if your site has the budget for it.
dot wrote:
“I think a great deal of the same reuse of typefaces comes from known quality. I know I’ve found a cool font and tried to use it, only to realize it has bad character support or weird kerning when used on the web—or even worse (and all too common—i swear no one checks these things on windows machines), bizarre cross browser compatibility on google fonts…”
I think a lot of designers share dot’s frustration. There are thousands of fonts that are, for one reason or another, unsuitable or, at least, very problematic for web use. But vendors leave the evaluation up to the customer. There is no ‘International Society Of Web Font Engineers’ stamp of approval, there is no regimen of tests applied by the vendor to assess whether or not a font is fit for use as a web font, no, there is only USER BEWARE. Caveat Emptor. And there is only so much time a designer is going to waste before giving up the hunt and following the rest of the pack.
So, I think it’s not so much the safety of “known quality” that has designers closing ranks behind a small set of fonts as much as it is fear of the “unknown quality” of the fonts in the seemingly bottomless pits at sites like MyFonts or Fontshop. Almost all of those fonts were NOT designed as screen fonts with performance in browsers being the top concern. Fonts are still, nearly always, conceived as graphic arts tools where the requirements are, in some respects, less stringent than browsers and in some respects, more stringent than in browsers.
In the age of system-fonts-only, designers had no choice but to use what they were given. What was in the font or how it was prepared was irrelevant. What difference did it make?
Like a prisoner in solitary confinement, whatever was on the dinner plate they handed you, you ate. But in the age of web fonts, knowing what ingredients are needed to make a working web font is no longer useless information. It is expertise that must be acquired because the freedom to choose from among thousands of fonts is of potentially so much greater consequence than choosing from among the same old handful of web-safe system fonts as everybody else.
As more and more designers become more and more familiar with fonts as tools engineered to meet specific requirements, the more they will be emboldened to break away from the pack. I hope.
I believe it is mostly a matter of time.
Just chiming in to second self-hosting. I was an early adopter of Typekit and I respect the Typekit team immensely for their leadership and generosity within the web fonts space. Though the interface can be a bit kludgy and buggy, I find myself using Fonts.com more due to their greater selection of fonts available for both web + print (so useful for branding projects that span a variety of media) and the fact that I can choose to self-host fonts. In my experience, remotely hosted fonts don’t load reliably fast enough, certainly not as much as they used to — maybe as more people rely upon these services? I can get much faster performance hosting the fonts myself, even with the required remote script call.
I sheepishly admit to have used Lato Sans in the last few years, but it was genuinely the product of 1) needing an open source font for budget/licensing/project reasons, and 2) Lato was the only typeface in the Google Fonts library of the time that was built with an acceptable level (to me) of craft, with a nice range of weights, a beautiful italic, and the welcoming, inclusive personality appropriate for the brand. I’ve watched it explode since with some chagrin.
I’m glad you mentioned Fira. It’s on my short list given the right project. Erik Spiekermann Meta-ish goodness at a price anyone can afford. 🙂
Maybe one of the reasons is this: when someone wants to create a website, they search for the best Font…where?
Open google.com, search for “best font for website”…and from this comes the “we can’t browse the web for 15 minutes without encountering Open Sans and Lato”
People need to be educated, in order to understand that there is not “best font”, only “best font for your website”.
“there is no regimen of tests applied by the vendor to assess whether or not a font is fit for use as a web font”
Well, that’s not entirely true and very much depends on the foundry or supplier of webfonts. I know that Webtype for instance has a pretty rigorous quality assurance routine for all fonts they offer—and so have other independent foundries—and the fonts work reliably well across all browsers in the sizes they recommend them. I guess it boils down to the trite phrase “you get what you pay for”.
In response to my:
“there is no regimen of tests applied by the vendor to assess whether or not a font is fit for use as a web font”
kupfers wrote:
“Well, that’s not entirely true and very much depends on the foundry or supplier of webfonts.”
etc…. and Font Bureau’s Webtype is held up as an example of rigorous quality assurance.
Indra,
First, thanks for writing webfont as a single word. I hope that becomes a universal trend. it helps conceptually because fonts on the web are, indeed, a different animal than fonts installed as graphic arts tools in the operating system. Second, I’m familiar with Webtype’s selection, and I admire the quality of the screen rendering quality of the entire catalog. OK? We good? I would expect no less from D. Berlow & Co.
Shameless self-promotion: I’m giving a 40 minute talk at Sota’s TypeCon conference in Seattle this year that’s about one part of this problem: the need for more Unicode character points to support how browsers handle fonts, as opposed to how a graphic arts tool like InDesign handles fonts.
I understand you’ll be there. So bring your boxing gloves.
A parting shot: speaking of Webtype, take a look at the character set for the font Escrow Banner Compressed Roman at:
http://www.webtype.com/font/escrow-banner-compressed-roman/#glyphs-tab
Now, figure out exactly what languages are supported by that character set and, just as importantly, which languages are NOT. (I’m sorry, but the terms Latin 1 or Latin 2 don’t mean anything meaningful to anybody, if indeed, they ever did.)
Then, after you know that. Put each character on trial for its life. Do you really need glyphs that show hands with pointing index fingers? Probably not and, contrary to every tutorial I’ve ever read – the size of a font is not tied to the number of glyphs a font has. All glyphs are not created equal. The size of a font is tied to the number of points and curves that it has – because that’s what determines the amount of data within it. And those faux engraved little do-dads like that take up a LOT of data.
You don’t see too many grunge fonts – or any grunge fonts – being used as web fonts do ya? That’s the reason. Too many points and curves involved for even a rudimentary character set.
I think like the network systems engineer turned web developer that I am – you don’t, that’s the diff.
But dress British, think Yiddish, and you’ll be OK.
Note: Indra offers some additional reflections on this on her own site and over at Alphabettes.
Great insight to web typography. As a web developer working with designers, I constantly hear and see the same typefaces being used in projects which creates a mindset that these are the “best” fonts out there – “mere-exposure”.
Your article has opened up avenues which I could take when it comes to selecting the right typeface for a project. In fact, I have taken in account your Proxima Nova sans-serif alternatives for a website I am currently working on.
Cheers!
Great advice about typography, thank you. Great article btw.
Great article about Web typography, Jeremiah.
You raised some insights I haven’t considered before.
As far as decisions go selecting type, though, I have a sense that often, to quote Freud, sometimes a cigar is just a cigar. Aside from sites where design creativity is emphasized, it often seems (at least to me) that ruthless practicality is the rule, not the exception, when it comes to selecting type. With the multitude of other challenges to creating (and getting client buy-in) Web experiences, this may often come down to a simple heuristic of practicality for quick acceptance.
Being multilingual (and thus is the content on my site), I know first-hand of the challenges of limited character sets for many webfonts other posters have noted. And this isn’t for an obscure language–it’s German. I can only imagine how it is for other languages, especially non-Indo European languages that use the Latin alphabet.
Another constraint of Web typography is page load. Coming from a print background, it took me a bit of adjustment to becoming more creative in selecting site typography. Type families such as Knockout or Gotham offer a wide range of diversity within the family, but the bandwidth hit forces more limited set usage than in print. Just another creative challenge that needs consideration when approaching Web typography.
It’s heartening to see that my own typographic brand choices aren’t listed as overused. But then, I didn’t have to negotiate with anyone on the license budget.
Thank you for the ressources
Great article thanks.
Choosing the well trodden path may also come down to confidence. There are many pitfalls in typography and it is easy to be scared of ridicule and scorn.
Your article is a nice reminder to go out and experiment and perhaps not be too scared of failure or not knowing something. Someone will probably point it out to you, and then you can learn.
I’m guilty of using all of the fonts you mentioned. As a designer you gravitate towards fonts with multiple weight choices. Google Fonts seems to work better on the web than Typekit does. Thanks for the heads up on Fira Sans!
Always a pleasure to read your work Jeremiah. A big fan of your website Typewolf.
thanks for article quality . discussions were very useful , especially for me who was working on the task
Thanks for giving most important information i will work help the help of this article on web services
Great article, I think Gotham has been over used now though…
Nice, Thanks!
Good insight. Good fonts list.