A List Apart Blog The Rich (Typefaces) Get Richer

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:FuturaAperçuProxima NovaGothamBrownAvenirCaslonBrandon GrotesqueGT WalsheimCircularAnd here are the ten most popular from 2014:Brandon GrotesqueFuturaAvenirAperçuProxima NovaFranklin GothicGT WalsheimGothamCircularCaslonNotice 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 richerI 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?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-it 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 textEven 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 TypekitThere 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)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 WebtypeIt 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 FontspringDon't be afraid to self-host web fonts. Serving fonts from your own website really isn't