So, you’ve finally spent the time to get your branding right, blowing up all that inconsistent ad-hoc work done across the years and turning it something cohesive and consistent. Your brand guidelines are all set and your print collateral is all built on the new typography that is a major component of your brand identity. But what about online?
Used to be that to integrate your website’s typography with the rest of your branding, you could fumble around with making graphics, or maybe use advanced, but cumbersome techniques like Cufon or sIFR. But if you’re a nonprofit or business looking to create an on-brand website today, you don’t need to compromise any longer. Thanks to the tireless efforts of some savvy, brand- and type-minded folks, we have entered the age of rich internet typography! And it’s not about selecting fancy typefaces – it’s about creating a more consistent, stronger, more valuable brand experience.
Imagine if print designers across the world were restricted to four typefaces. Unthinkable! But that has been a reality for web designers since the beginning of the Web— until recently. Finally, design teams can ignore system typefaces faces like Arial, Helvetica, Georgia, and Times and concentrate on strengthening client brands through the use of the typefaces chosen as part of their brand identity. And given where we were even a year ago, it’s remarkable what a difference this makes — how much fresher and effective your website looks with custom type — not to mention consistent with the rest of your communications.
So what is this panacea of brand consistency we’re talking about? It’s the @font-face CSS rule. If you’re someone involved in developing websites, you are probably aware of the big players in web type, but may not have firsthand experience with any of the specific vendors yet. We’ve kicked the tires on many of them and pulled together a roundup of six major offerings, which we’ll review across the next 2 weeks.
Things to consider when choosing a web font vendor
There are a few major considerations to take into account when choosing a web type vendor:
- Typeface Quality/Availability
This is, of course, probably the most important consideration and, depending on how desperately you need a certain face, may make the decision for you.
There are a few pricing models for web type:
- Library Subscription: a monthly or yearly fee gets you access to a whole library of typefaces
- Per-Face Subscription: a monthly or yearly fee gets you access to a specific typeface
- Per-Face Download: a fee allows you to download web font files that you implement and host yourself
- Free – either hosted or for download, no cost
- The Incomprehensible-WebINK-Pricing-Model from Extensis: I haven’t used this service but, honestly, if anyone has figured out this pricing model, please let me know.
- Ease of Use
It is important that the service be easy to setup and implement. You should’t have to be a programmer to get your web type up and running. Fortunately, a lot of smart people are working in this field and the offerings are generally quite good in this regard.
For the subscription services, the actual font assets are stored on their servers and delivered to your site users on an as-needed basis. If the provider is having server problems, this could mean that your fonts will not load. Guaranteed up-time and server redundancy are things to look for in a type service vendor.
You’ll want to know roughly what your pageviews/month are for your projects to choose the correct pricing tier.
Our Favorite Web Type Services
So, onto the good stuff. In this two-part series, I’ll be reviewing 6 web type services we’ve used regularly in the studio, starting today with 3 subscription-based plans, Fonts.com, Typekit, and Webtype. In Part 2, 6 Best Web Type Services I’ll take a look at 3 self-hosted solutions
Starts at $10/month for 250,000 pageviews/month
Library Size: A+
Typeface Quality: B-
This is a huge library of typefaces. Many of the fonts available here are “workhorse” fonts, major selections from the Monotype, Linotype and ITC collections and many other classic typefaces. There is also a lot of junk in here but, overall, a useful library of standard fonts. Not what I would describe as cutting-edge, though.
Ease of Use: A-
Browsing for typefaces on the website is pretty rough – best to know what you’re looking for ahead of time. Setting up a new project, however, is easy and intuitive. You can setup CSS selectors on the site or do it yourself in your stylesheet. At the end of the setup process, it very clearly gives you the code you need to make the fonts work on your site.
We’ve had no performance issues with Fonts.com’s servers and have used this service the most out of all those reviewed. Their font delivery and uptime are first-rate.
Desktop downloads available for Professional tier. Self-hosting option available for Professional tier. Fun! Apply custom fonts to any website you want with their Web Fonts Preview tool.
Learn more at Fonts.com
Solid pricing starts at $25/year for 50,000 pageviews/month and a limited library. Their $50/year Portfolio option is a great deal —full font library access for 500,000 page views/month.
Library Size: A
Enormous! 4000+ fonts.
Typeface Quality: A-
A bit of sifting required because there are so many fonts, but overall, these are solid, usable, good typefaces; no junk here.
Ease of Use: A
Beautiful website and UI for browsing fonts – really nicely done. The setup process and admin of fonts for your various projects (the Kit Editor) is well thought out and works very well.
I get the occasional snag waiting for Typekit fonts to load. This happens and is part of life online but it has happened a few times too many for me.
Nice that they include Language Support in their type browser. Recently purchased by Adobe – bodes well for longevity.
Learn more at Typekit.com
This is a pretty expensive service. We’re talking $40/year per weight for 250,000 pageviews/month for some faces (faces start at $10 but every face I’ve chosen has been $40 per). Since we typically use at least 4 or 5 faces/weights per site, this can add up quickly.
Library Size: B
Pretty light, about 400 or so, but with Webtype it’s all about quality over quantity.
Typeface Quality: A+
These are the highest quality, best web typefaces out there, in my opinion. A bit of you-get-what-you-pay-for.
Ease of Use: A
It’s interesting, all of these services approach the admin and integration of the fonts a bit differently, but they’re all pretty easy to use. Webtype is no exception with a very nice website and a very clear admin.
I’ve waited on Webtype’s servers over and over again while developing sites—to the point where I disabled the web fonts while I was working because it was really getting on my nerves. Granted, while developing you hit refresh thousands of times a day but none of the other services gave me trouble like this.
Learn more at Webtype.com
I’ll review our 3 other favorite services next week in Part 2, so be sure to check back!
Projects & Insights
Best Practices for Online Reports: PDF-First Publishing
The Case for a PDF-driven Workflow and How To Make It Work Better for Your Organizati
National Head Start Association
Foundation for the Public's Health
A Quick, Responsive Grid System with Flexbox
CSS layout has a storied past. From tables to floats and now Flexbox. In this article