Once thought of as amateurish by professional designers, free and open-source fonts have gone through something of a renaissance in just the last few years. The quality of available free fonts has increased dramatically. To be frank, free fonts don’t have a good reputation, and often they are knock-offs of thoroughly crafted, already established typefaces. So is it time for professional designers to take a second look?
First, A Story Link
Early in my design career, around 2003, I wanted to purchase the font DIN1 for a project at work. My manager promptly dismissed the idea of paying for a font and instead handed me a CD that had “5,000 free fonts” on it, saying “This CD has every font a designer could possibly need. No need to waste money buying fonts!”
I popped the CD in my computer and found a collection of the most horrendous fonts you could imagine. Novelty and “retro” fonts. Spooky Halloween fonts. “Techno” fonts. Fonts with letterforms made up of cats posing in crazy positions. Fonts with terrible kerning, missing glyphs and wonky rendering. Fonts available only in single weights with no italics.
Nowhere to be found was DIN or, for that matter, any font that a professional designer would actually use. Feeling dejected, I ended up just using Helvetica because we actually owned that one.
Fast-forward to 2014. When I hear the words “free fonts,” I still can’t help but picture that horrible CD. But things have completely changed since then, and I find myself actually using free fonts quite often in my projects.
Where Do Free Fonts Come From? Link
In the past, free fonts typically came from one of two places: amateur designers who created fonts for fun or as a learning experience, and professional type designers who released a single variant of a font family for free as a form of marketing, the idea being that people would come back to purchase the full family once they realized the limited usefulness of a font without multiple weights and italics.
Why Is Having Multiple Weights With Italics So Important? Link
To set body copy properly, a font family requires four variants: normal, italic, bold and bold italic. A font used on the Web that doesn’t include these four basic variants will inevitably get the dreaded faux bold and faux italic2 treatment generated by the browser, which should be avoided at all costs — in fact, there are3 ways4 to avoid them for good. Other weights, such as light and extra bold, are helpful for creating typographic contrast between elements.
Free Fonts Are Not What They Used To Be Link
Recently, large companies such as Adobe and Google have been commissioning fonts for open-source projects and releasing them for free on the Web. Professional typeface designers have been getting involved in open source as well, sharing complete font families on Google Fonts5.
Thanks to the open-source community, there are now free fonts available that even typography snobs would be happy to use. The following fonts all have multiple weights with matching italics. They are suitable for headlines as well as body copy, and they render well on screen and at small sizes.
Alegreya6 is an award-winning serif typeface, chosen by ATypI as one of 53 “Fonts of the Decade” in its Letter.2 competition7. It is available for free on Google Fonts, but, sadly, most designers don’t seem to know about it. I hardly see Alegreya used anywhere online, which is a shame because this is a truly great font. Alegreya was designed with printed text in mind, but it is excellent to read on screen as well.
The designer, Juan Pablo del Peral, claims that just as much care and attention to detail was spent on designing the italic as the roman and it definitely shows — the italic style is especially beautiful. I hope more designers become aware of this excellent typeface and that we’ll see it used more widely on the Web in 2014.
The beautiful bold italic style of Alegreya is used for a heading on Beef’s job section.
Source Sans Pro Link
Released by Adobe in August 2012, Source Sans Pro12 is Adobe’s first open-source font. Its designer, Paul D. Hunt, was inspired by early-20th-century gothics such as Franklin Gothic and News Gothic. To my eyes, Source Sans Pro feels much more modern, a little reminiscent of FF Meta. Its intended use is for user interfaces so it renders very well at small sizes. The font is available in an impressive 6 weights, making it extremely versatile.
CAST8314 uses Source Sans Pro throughout its website, showing off the diversity of the family; large headlines are set in the lighter weights, while the heavier weights are used at smaller sizes and set in uppercase, creating excellent typographic contrast.
Open Sans Link
Designed by well-known type designer Steve Matteson and commissioned by Google, Open Sans18 is one of the most widely used open-source fonts on the Web. It is the default font for Zurb’s new Foundation 519 framework and is used on many of Google’s redesigned pages20. I’ve even heard Open Sans described as the “flat design” font. The five weights with matching italics make this humanist sans-serif useful for a wide variety of situations
Vitor Andrade’s website22 uses Open Sans in a very understated way; the minimal, type-driven design doesn’t draw attention to itself, appearing very neutral and lending focus to the excellent work being featured on the website.
The light weight of Open Sans is used for the article titles on The Industry’s website.
Anonymous Pro Link
Anonymous Pro24 is a monospaced font that I’m surprised so few designers know about, considering it was designed by Mark Simonson25, the type designer behind Proxima Nova26. Monospaced fonts seem to be popular with designers at the moment, and Anonymous Pro is an excellent option.
Inconsolata27 is a much more widely used monospaced font, also available on Google Fonts, but doesn’t include italics, as Anonymous Pro does. Setting body copy in a monospaced font isn’t always a good idea, but in the right context it can give a design a very clean and refreshingly sparse feel.
Playfair Display Link
Playfair Display34 is a high-contrast serif designed by Claus Eggers Sørensen. Reminiscent of Baskerville35, it takes its cues from the typeface designs of the late-18th century. Although designed primarily for titles and headings, the three weights with matching italics make it suitable for short stretches of body copy as well. For longer stretches of body copy, Playfair Display pairs very well with Georgia.
Roboto41 has been accused of being a “Frankenfont42” — a mashup of Helvetica, DIN and Myriad. I understand where the criticisms come from, but I quite like Roboto. Updates and improvements43 have been made to Roboto since that “Frankenfont” article, and I think the font works great on screen at different sizes and device resolutions, which is its purpose.
Lato51 is Polish for “summer,” and the name perfectly fits this warm-feeling sans-serif. The designer, Łukasz Dziedzic, originally designed Lato as a corporate font for a large client. After the client decided to go in a different design direction, Łukasz released the font for public use. Lato feels very modest and unassuming when set at small sizes in body copy, but the italic variant is distinctive and easily recognizable. Lato is used in WordPress’ latest default theme, Twenty Fourteen52, so its popularity on the Web is sure to increase.
Designed by Eben Sorkin58, Merriweather59 is a serif font created for on-screen reading. Its tall x-height and hefty serifs give it excellent legibility. Merriweather is under active development, and improvements are constantly being made. There is also a sans-serif version60 of Merriweather available that makes an excellent companion.
Karla66 is a grotesque sans-serif designed by Jonathan Pinhorn that is full of character and quirks. Something about it reminds me of the trendy Apercu67 font. The tracking might be set a little wide for body copy, and some of the kerning can be a little wonky, but something about this font makes me overlook those downsides. This is a perfect font to add a touch of personality to your design.
Clear Sans Link
Clear Sans73 is Intel’s recent contribution to the open-source font community. Designed with on-screen legibility in mind, Clear Sans prides itself on its unambiguous character design. For example, the uppercase “I” has serifs added to distinguish itself from the lowercase “l”. This makes it an excellent choice for UI design work where clarity is key. Clear Sans is currently not available through Google Fonts, so designers looking to use this font will need to host it themselves.
Fira Sans Link
Designed for the Firefox Operating System, Fira Sans76 was recently released as a free font available for public use. The font shares many similarities to FF Meta, which makes sense as Erik Spiekermann is the designer of both. It’s rare to find a free font created by such a renowned typeface designer. Fira Sans also includes a monospaced version called Fira Mono. Interestingly, the web font used on the official Fira Sans page is Open Sans, not Fira Sans. You’d think Mozilla would want to show off their new font on their site.
Other Free Fonts Worth Checking Out Link
Don’t Rely On Free Fonts For Every Project Link
As nice as the fonts above are, designers shouldn’t rely entirely on free fonts. Free fonts will never match the quality of the fonts offered by top type design foundries. Budget for professional fonts in every project when possible. Type foundries need the support of the design community to continue innovating and producing excellent fonts.
That being said, if a project requires free fonts, whether due to budget constraints or other reasons, then rest easy knowing that an ever-growing selection of professional-quality fonts are available at your disposal. I continually update a curated list of open-source Web fonts86 in my side project, Typewolf87. You can also follow me @typewolf88 and check out my other side project, Type & Grids8947, which uses many of the fonts featured in this article.
Designing a typeface requires a lot of time, patience and very hard work, and type designers should be rewarded for their work. So if you decide to use a free font, please always make sure to support type designers by purchasing the other fonts that they created or donating to support their efforts.
(al, vf, il)
- 1 http://www.typewolf.com/site-of-the-day/fonts/din
- 2 http://alistapart.com/article/say-no-to-faux-bold
- 3 https://www.smashingmagazine.com/2012/07/11/avoiding-faux-weights-styles-google-web-fonts/
- 4 https://www.smashingmagazine.com/2013/02/14/setting-weights-and-styles-at-font-face-declaration/
- 5 http://www.google.com/fonts
- 6 http://www.google.com/fonts/specimen/Alegreya
- 7 http://letter2.org
- 8 http://www.wearebeef.co.uk/
- 9 http://www.wearebeef.co.uk
- 10 http://www.typewolf.com/site-of-the-day/fonts/avenir
- 11 http://www.typewolf.com/site-of-the-day/fonts/alegreya
- 12 http://www.google.com/fonts/specimen/Source+Sans+Pro
- 13 http://www.cast83.com/
- 14 http://www.cast83.com
- 15 http://plentific.com
- 16 http://plentific.com
- 17 http://www.typewolf.com/site-of-the-day/fonts/source-sans-pro
- 18 http://www.google.com/fonts/specimen/Open+Sans
- 19 http://foundation.zurb.com
- 20 http://www.google.com/analytics/
- 21 http://vitorandrade.co/
- 22 http://vitorandrade.co
- 23 http://www.typewolf.com/site-of-the-day/fonts/open-sans
- 24 http://www.google.com/fonts/specimen/Anonymous+Pro
- 25 http://www.marksimonson.com
- 26 http://www.typewolf.com/site-of-the-day/fonts/proxima-nova
- 27 http://www.typewolf.com/site-of-the-day/fonts/inconsolata
- 28 http://www.helloper.com/
- 29 http://www.helloper.com
- 30 http://www.typewolf.com/site-of-the-day/fonts/futura
- 31 http://www.helloper.com
- 32 http://www.helloper.com
- 33 http://www.typewolf.com/site-of-the-day/fonts/anonymous-pro
- 34 http://www.google.com/fonts/specimen/Playfair+Display
- 35 http://www.typewolf.com/site-of-the-day/fonts/baskerville
- 36 http://www.boompa.ca/
- 37 http://www.boompa.ca
- 38 http://digitalabstracts.com/playing-arts-project/
- 39 http://digitalabstracts.com/playing-arts-project/
- 40 http://www.typewolf.com/site-of-the-day/fonts/playfair-display
- 41 http://www.google.com/fonts/specimen/Roboto
- 42 http://typographica.org/on-typography/roboto-typeface-is-a-four-headed-frankenstein/
- 43 http://www.androidpolice.com/2013/06/29/typeface-teardown-roboto-gets-a-facelift-in-android-4-3/
- 44 http://www.google.com/fonts/specimen/Roboto+Slab
- 45 http://www.google.com/fonts/specimen/Roboto+Condensed
- 46 http://www.typeandgrids.com/
- 47 http://www.typeandgrids.com
- 48 http://paonecreative.com/category/culture-blog/
- 49 http://paonecreative.com/category/culture-blog/
- 50 http://www.typewolf.com/site-of-the-day/fonts/roboto
- 51 http://www.google.com/fonts/specimen/Lato
- 52 http://theme.wordpress.com/themes/twentyfourteen/
- 53 http://frankchimero.com/what-screens-want/
- 54 http://frankchimero.com/what-screens-want/
- 55 http://celebratedesign.org
- 56 http://celebratedesign.org
- 57 http://www.typewolf.com/site-of-the-day/fonts/lato
- 58 http://sorkintype.com
- 59 http://www.google.com/fonts/specimen/Merriweather
- 60 http://www.google.com/fonts/specimen/Merriweather+Sans
- 61 http://dicksonfong.com/
- 62 http://dicksonfong.com
- 63 http://www.vtcreative.fr
- 64 http://www.vtcreative.fr
- 65 http://www.typewolf.com/site-of-the-day/fonts/merriweather
- 66 http://www.google.com/fonts/specimen/Karla
- 67 http://www.typewolf.com/site-of-the-day/fonts/apercu
- 68 http://borschvodkaandtears.com/
- 69 http://borschvodkaandtears.com
- 70 http://kalynnakano.com
- 71 http://kalynnakano.com
- 72 http://www.typewolf.com/site-of-the-day/fonts/karla
- 73 https://01.org/clear-sans
- 74 https://01.org/clear-sans
- 75 https://01.org/clear-sans
- 76 http://www.mozilla.org/en-US/styleguide/products/firefox-os/typeface/
- 77 http://www.mozilla.org/en-US/styleguide/products/firefox-os/typeface/
- 78 https://www.google.com/fonts/specimen/Exo
- 79 https://www.google.com/fonts/specimen/Signika
- 80 https://www.google.com/fonts/specimen/Arimo
- 81 https://www.google.com/fonts/specimen/Raleway
- 82 https://www.google.com/fonts/specimen/Montserrat
- 83 https://www.google.com/fonts/specimen/Muli
- 84 https://www.google.com/fonts/specimen/Domine
- 85 https://www.google.com/fonts/specimen/Lora
- 86 http://www.typewolf.com/open-source-web-fonts
- 87 http://www.typewolf.com
- 88 http://twitter.com/typewolf
- 89 http://www.typeandgrids.com
- 90 http://vitorandrade.co/
Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.