Implementing custom typography on the web used to be hard. We were limited to a small set of “web-safe fonts”, provided by Microsoft’s Core Fonts for the Web initiative back in 1996. They’ve stuck around and continue to be reliable fallbacks. You know the crew: Andale Mono, Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana, and Webdings.
Using anything outside of that list meant including text as flat images (oof!), or using interim solutions like Flash-based sIFR. None of these solutions are best (or even good) practices anymore; Flash is dead, and including text inside images is bad for accessibility, is not responsive-friendly, and often just looks bad.
Custom type via @font-face
These days, custom type is practically expected on any new site. Use of @font-face is supported in every major browser, allowing us to load as many custom fonts as we want (bandwidth permitting)! Screen resolutions have also increased dramatically in parallel with web browser improvements, allowing for crisper, more readable text on screen.
Our greatest challenge now is wading through the massive ocean of available typefaces and understanding the confusing licensing options.
If you’ve been through this process, you’ve probably asked yourself: Should I purchase a subscription? Should I pay for a set number of pageviews upfront? Or, should I just throw in some free fonts and call it a day?
Getting Started
There are a few questions you should ask yourself early in the design process when considering your web typography:
Are you constrained by existing branding guidelines?
When working with clients, we often have to match brand guidelines. I try to understand early whether the site must be designed in a particular typeface, or whether something visually similar is acceptable. In either case, I immediately search for where I can license it for the web. Sometimes it’s only available from one provider, but many popular typefaces are on multiple sites, making it harder to know who to choose (keep reading!).
Can you (or your client) afford to pay for font licensing?
If so, great! Investing in good design and typography is good for your business. This means you’ll have an incredibly wide array of options to choose from when deciding (see below). If not, no worries. You’ll be limited to free and open source fonts, but there still are a ton of high-quality options out there.
How many different typefaces and styles do you need?
If you only need two or three styles, shelling out for a subscription that provides access to thousands of fonts probably doesn’t make sense. But maybe your design calls for multiple typefaces and a wide range of styles. In that case, a subscription might include all of the families and styles you’re looking for and will be cheaper in the end.
Family bundles for one typeface are also common, and can save you some money even if you don’t need every last style included in the bundle. Do the math and figure out which one makes sense for you!
How much flexibility do you need?
Do you think you might want to swap out one typeface for another down the road? Subscriptions are perfect for this; since you’re paying for access to an entire library of typefaces, there’s no additional cost if you decide to experiment over time.
General Tips
Before we go into too much detail, here are some general tips for the licensing process.
Always read the license!
Check to see whether the license applies to print, apps, or other non-web use cases. You may need to purchase a separate print license, for example. You may be required to host the font on your server, or required to link to fonts hosted by the provider, which may matter to you.
Know your traffic
Most web font licenses cover around 250,000 page views/month by default, but you can pay for more. Most sites don’t need to worry about hitting this limit but maybe you do!
Save money by planning ahead
Print and web licenses are often bundled together at a discount! If you need both, buy them all at the same time and save some money. Likewise, if you expect to need more than a few styles from one family, purchasing a family bundle is usually cheaper, even if you don’t need every last style. You never know when they might come in handy later!
A comparison of licensing options
Subscriptions
These are the most convenient and offer great flexibility to change/grow your type palette over time. Subscriptions are great for serving up fonts on multiple sites too. If you need to license multiple typefaces, there could potentially be cost savings. Some, like Fonts.com, allow you to download desktop fonts to try out in design software.
There are often a number of pricing tiers to choose from, based on your needs. They’re usually based on the number of sites you need to support and the number of monthly page views you’ll be serving up. It’s also common for the free or cheap tiers to offer a smaller library of fonts or require a badge to be displayed on your site.
Expect a subscription to cost around $100 per year (depending on your traffic).
Common subscription providers include:
- $49.99/year for the most common plan
- Includes about 1500 font families
- Many of the fonts can be synced to your computer for use in Photoshop or Sketch
- No option to self-host
- $120/year for the most common plan
- Huge library of “over 40,000 fonts” (but only about 1900 of those have been hand-tuned for the web)
- More isn’t necessarily better; there are a lot of mediocre fonts in their library
- A lot of them aren’t tuned specifically for the web and end up looking crunchy/bad, especially on Windows
- Includes hosted fonts and self-hosting options
- $100/year for the subscription, and you get five type packages for free, but have to pay for the fonts separately after that
- They offer “ScreenSmart fonts” which are tuned to look great on screens (regardless of OS/browser)
- Font data is partially self-hosted
- All of the fonts they sell are only available through them
Pay-as-you-go
This is great when you know exactly what you need. Most often, you purchase a license for a certain number of pageviews for the specific set of fonts you choose. You’re usually (but not always!) required to include a tracking code on your site so they know when you’ve used up your pageviews. At that point you need to refresh the license to buy another batch of pageviews.
Some type foundries choose not to sell their fonts through the big providers, so purchasing a license like this is often the only way you can get some typefaces.
If you’re working with a client that has a defined type palette this is probably the best way to go!
Recommended providers:
- FontShop
- Grilli Type
- Commercial Type
- Millieu Grotesque
- Process Type Foundry
- Production Type
- Klim Type Foundry
One-time Fee
Although common for desktop font licensing, one-time purchases are rare in the world of web fonts. Most companies choose to charge based on pageviews, a concept that’s impossible to track in print.
MyFonts, however, has some of the most generous and flexible licensing terms I’ve seen out there. Most of their web font library can be purchased with a one-time license fee and self-hosted, removing the need to track page views or worry about recurring payments.
Free and open source
Google Fonts has long been the best place to find free and open source fonts for use on the web and beyond. Google has done a great job funding the development of a ton of typefaces over the last decade, and then making them available for free under an SIL Open Font License. There are now over 800 font families, many of which have a robust set of styles available!
The League of Moveable Type is another shining beacon in the world of open source typography. Since 2009 they’ve been designing quality type and making it freely available under the same Open Font License that Google uses. They even make all of the source code for their fonts available on Github!
Font Squirrel is another good resource for free fonts, but it’s important to do a little homework first. Unauthorized copies of commercial fonts have snuck their way onto the site in the past, and some of the licenses are for print use only. Always read the license and consider doing a quick Google search to verify whether it’s legit.
Recommended open source fonts
Below are some of my favorite families available through Google Fonts. These are typefaces that I’ve worked with in the past; they all have large families with plenty of styles. They're a great starting point if you're beginning to implement custom type on your site!
- PT Serif
- Droid Serif
- Merriweather
- Alegreya
- Rasa (great for supporting non-Latin scripts, but if you don't need the full character set there's also the Latin-only Yrsa)
- Playfair Display (not suitable for body text, but great for headers!)
- Cormorant
In case you’re curious, all of the wonderful pangrams from the above image can be found here.
So, go forth and license without fear! Just make sure you read the fine print.
