There are over 1,200 font households accessible on Typekit. Anybody with a Typekit plan can freely use any of these typefaces, and but we see the identical small choice used completely in all places on the net. Ever surprise why?
Article Continues Beneath
The identical phenomenon occurs with different font companies like Google Fonts and MyFonts. Google Fonts gives 708 font households, however we will’t browse the net for quarter-hour with out encountering Open Sans and Lato. MyFonts has over 20,000 households accessible as internet fonts, but designers persistently attain for under a slender number of these.
On my facet mission Typewolf, I curate each day examples of good kind within the wild. Listed below are the ten hottest fonts from 2015:
- Futura
- Aperçu
- Proxima Nova
- Gotham
- Brown
- Avenir
- Caslon
- Brandon Grotesque
- GT Walsheim
- Round
And listed below are the ten hottest from 2014:
- Brandon Grotesque
- Futura
- Avenir
- Aperçu
- Proxima Nova
- Franklin Gothic
- GT Walsheim
- Gotham
- Round
- Caslon
Discover any similarities? 9 out of the ten fonts from 2014 made the highest ten once more in 2015. Admittedly, Typewolf is a curated showcase, so there’s sure to be some bias within the web site choice course of. However with 365 websites featured in a yr, I feel Typewolf is a strong illustration of what’s common within the design group.
Different lists of common fonts present comparable outcomes. Or just look across the internet and take a peek on the CSS—Proxima Nova, Futura, and Brandon Grotesque dominate websites right this moment. And these fonts aren’t only a little extra common than different fonts—they’re orders of magnitude extra common.
In the case of typefaces, the wealthy get richer#section2
I don’t imply to indicate that kind designers are getting wealthy like Fortune 500 CEOs and flying round to kind conferences of their personal Learjets (though some kind designers are actually doing fairly effectively). I’m simply stating {that a} tiny proportion of fonts get the lion’s share of utilization and that these “chosen few” proceed to grow to be much more common.
The wealthy get richer phenomenon (also called the Matthew Impact) refers to one thing that grows in reputation on account of a optimistic suggestions loop. An app that reaches primary within the App Retailer will obtain press as a result of it’s primary, which in flip will give it much more downloads and much more press. Reputation breeds reputation. For a cogent e-book that discusses this subject rather more eloquently than I ever may, take a look at Nicholas Taleb’s The Black Swan.
However again to typefaces.
Designers have a tendency to repeat different designers. There’s nothing flawed with that—designers ought to actually attempt to construct upon the most effective practices of others. They usually shouldn’t be culturally remoted and unaware of present tendencies. However designers additionally shouldn’t simply mimic every thing they see with out placing thought into what they’re doing. Sadly, I feel that is what usually occurs with typeface choice.
How does a typeface first grow to be common, anyway?#section3
I feel all of it begins with a forward-thinking designer who takes an opportunity on a brand new typeface. She makes use of it in a design that goes on to garner a number of consideration. Possibly it wins an award and is featured prominently within the design group. One other designer sees it and thinks, “Wow, I’ve by no means seen that typeface earlier than—I ought to strive utilizing it for one thing.” From there it simply cascades into increasingly more designers utilizing this “new” typeface. However with every use, much less and fewer thought goes into why they’re selecting that exact typeface. Ultimately, it’s simply copying.
Or, a typeface initially turns into common merely from being in the appropriate place on the proper time. Whenever you hear tales about well-known YouTubers, there’s one factor virtually all of them have in frequent: they obtained in early. Earlier than the market is saturated, there’s a a lot better likelihood of standing out; your reputation is more likely to snowball. A couple of of the most well-liked typefaces on the net, similar to Proxima Nova and Brandon Grotesque, inform an analogous story.
The typeface Gotham skyrocketed in reputation after its use in Obama’s 2008 presidential marketing campaign. However though it gained monumental steam within the print world, it wasn’t accessible as an internet font till 2013, when the corporate then referred to as Hoefler & Frere-Jones launched its subscription internet font service. Proxima Nova, a typeface with an analogous look, grew to become accessible as an internet font early, when Typekit launched in 2009. Proxima Nova is much from a Gotham knockoff—an early model, Proxima Sans, was developed earlier than Gotham—however the two typefaces share a associated, geometric aesthetic. Many company identities used Gotham, so when it got here time to deliver that id to the net, Proxima Nova was the closest accessible choice. This pushed Proxima Nova to the highest of the bestseller charts, the place it stays to this present day.
Brandon Grotesque most likely gained traction for comparable causes. It has fairly a bit in frequent with Neutraface, a typeface that’s ubiquitous within the offline world—stroll into any bookstore and also you’ll see it in all places. Brandon Grotesque was accessible early on as an internet font with easy licensing, whereas Neutraface was not. In case you wished an art-deco-inspired geometric sans serif with a small x-height to your web site, Brandon Grotesque was the plain selection. It beat Neutraface to market on the net and is now some of the sought-after internet fonts. As soon as a typeface reaches a sure degree of recognition, it appears possible {that a} psychological phenomenon referred to as the provision heuristic kicks in. In keeping with the provision heuristic, individuals place rather more significance on issues that they’re simply capable of recall. So if a sure typeface instantly involves thoughts, then individuals assume it should be the best choice.
For instance, Proxima Nova is commonly regarded as extremely readable for a sans serif on account of its giant x-height, low stroke distinction, open apertures, and huge counters. And certainly, it really works very effectively for setting physique copy. Nonetheless, there are numerous different sans serifs that match that description—Avenir, FF Mark, Gibson, Texta, Averta, Museo Sans, Sofia, Lasiver, and Filson, to call a number of. There’s nothing magical about Proxima Nova that makes it extra readable than comparable typefaces; it’s merely the primary one which involves thoughts for a lot of designers, to allow them to’t assist however assume it should be the most effective.
On prime of that, the mere-exposure impact suggests that folks are inclined to favor issues just because they’re extra accustomed to them—the extra somebody encounters Proxima Nova, the extra interesting they have a tendency to search out it.
So if we’re caught in a optimistic suggestions loop the place common fonts hold changing into much more common, how can we break the cycle? There are some things designers can do.
Try to make your model identifiable by simply your physique textual content#section4
Even when it’s simply one thing refined, goal to make the kind in your web site distinctive indirectly. If a reader can inform they’re interacting together with your model solely by trying on the physique of an article, then you’re doing it proper. This doesn’t imply that you need to fully lose management and use kind only for the only function of standing out. Good kind, some say, needs to be invisible. (Some say in any other case.) Present restraint and discernment. There are numerous small issues you are able to do to make your kind distinctive.
Apart from going with a lesser-used typeface to your physique textual content, you’ll be able to strive combining two typefaces (or maybe three, for those who’re feeling frisky) in a singular means. Headlines, dates, bylines, intros, subheads, captions, pull quotes, and block quotes all provide ample alternative for experimentation. Attempt utilizing heavier and lighter weights, italics and all-caps. Utilizing shade is an alternative choice. A refined background shade or a contrasting subhead shade can go a good distance in making your kind memorable.
Don’t make your web site appear like a generic web site template. Be a model.
Dig deeper on Typekit#section5
There are numerous different high-quality typefaces accessible on Typekit apart from Proxima Nova and Brandon Grotesque. Spend a while searching via their library and check out experimenting with completely different choices in your mockups. The free plan that comes together with your Adobe Artistic Cloud subscription offers you entry to each single font of their library, so you don’t have any excuse to not a minimum of attempt to uncover one thing that not everybody else is utilizing.
A superb tip is to start out with a designer or foundry you want after which discover different typefaces of their catalog. For instance, for those who’re a fan of the favored slab serif Adelle from TypeTogether, merely click on the title of their foundry and also you’ll uncover gems like Maiola and Karmina Sans. Don’t be afraid to strive one thing that you simply haven’t seen used earlier than.
Dig deeper on Google Fonts (however not too deep)#section6
As of this writing, there are 708 font households accessible at no cost on Google Fonts. There are a number of dozen or so actually nice selections. After which there are numerous, many extra not-so-great selections that lack italics and extra weights and which can be affected by poor kerning. So, whereas you have to be cautious of digging too deep on Google Fonts, there are undoubtedly some much less ceaselessly used choices, similar to Alegreya and Fira Sans, that may maintain their very own towards any business font.
I absolutely help the open-source nature of Google Fonts and suppose that making good kind accessible to the world at no cost is a noble mission. As time goes by, although, the nice fonts accessible on Google Fonts will merely grow to be the following Instances New Romans and Arials—fonts which have grow to be so overused that they really feel like senseless defaults. So for those who depend on Google Fonts, there’ll at all times be a restrict to how distinctive and distinctive your model might be.
Attempt one other internet font service similar to Fonts.com, Cloud.typography or Webtype#section7
It could have an awesome choice, however Typekit actually doesn’t have every thing. The Fonts.com library dwarfs the Typekit library, with over 40,000 fonts accessible. Hoefler & Co.’s high-quality assortment of typefaces is simply accessible via their Cloud.typography service. And Webtype gives alternatives not accessible on different companies.
Self-host fonts from MyFonts, FontShop or Fontspring#section8
Don’t be afraid to self-host internet fonts. Serving fonts from your individual web site actually isn’t that tough and it’s nonetheless potential to have a fast-loading web site for those who self-host. I self-host fonts on Typewolf and my Google PageSpeed Insights scores are 90/100 for cellular and 97/100 for desktop—not unhealthy for an image-heavy web site.
MyFonts, FontShop, and Fontspring all provide self-hosting kits which can be surprisingly straightforward to arrange. Self-hosting additionally gives the additional benefit of not having to depend on a third-party service that might probably go down (and take your stunning typography with it).
Discover indie foundries#section9
Many small and/or unbiased foundries don’t make their fonts accessible via the most important distributors, as an alternative selecting to supply licensing straight via their very own websites. Most often, self-hosting is the one accessible choice. However once more, self-hosting isn’t tough and most foundries will give you all of the pattern code you should rise up and operating.
Listed below are some nice locations to start out, in no explicit order:
What about Massimo Vignelli?#section10
Earlier than I wrap this up, I feel it’s price briefly discussing famed designer Massimo Vignelli’s notorious handful-of-basic-typefaces recommendation (PDF). John Boardley of I Love Typography has written a wonderful critique of Vignelli’s dogma. The details are that people have a relentless want for enchancment and refinement; we’ll at all times want new typefaces, not simply in order that manufacturers can differentiate themselves from opponents, however to satisfy the ever-shifting calls for of latest applied sciences. And a restricted number of kind would create a really bland world.
Little doubt there have been these within the sixteenth century who shared Vignelli’s views. All ages is populated by those that suppose we’ve reached the apogee of progress… Vignelli’s beloved Helvetica, . . . would by no means have existed however for our want to do higher, to progress, to create.
Are internet fonts your best option for each web site?#section11
Not essentially. There are some situations the place accessibility and web site pace concerns could trump branding—in that case, it could be greatest simply to go together with system fonts. Georgia remains to be a fairly nice typeface, and so are newer system UI fonts likes San Francisco, Roboto/Noto, and Segoe.
However for those who’re engaged on a mission the place branding is essential, don’t ignore the significance of kind. We’re bombarded by extra content material now than at another time in historical past; having a particular model is extra crucial than ever.
90 p.c of design is typography. And the opposite 90 p.c is whitespace.
As designers, ask yourselves: “Is that this actually the most effective typeface for my mission? Or am I simply utilizing it to be protected, or out of laziness? Will it make my model memorable, or will my web site mix in with each different web site on the market?” The selection is yours. Dig deep, push your boundaries, and experiment. There are literally thousands of stunning and practical typefaces on the market—go use them!