Web Fonts: A Primer for Clients

by Steve Hickey

One of the discussions we’ve had over and over with our clients involves the choice of a web font service or platform for them. Because it’s such a frequent and important topic, I’d like to see if I can answer some of the common questions that we field.

“Why are the typefaces you choose so important in the first place?”

There are many reasons that we care so much about the typefaces we use in our work. The first (and, in my opinion, the most important) reason is that we care greatly about a person’s ability to read the work we produce. After all, the web is primarily made up of text-based information, conveyed through words and writing. If a person can’t read the words on the page, then we’ve made a serious mistake. There are a dizzying number of fonts available for us to use, but the first decision I use to filter them down is whether or not they are readable. While many of the fonts you find pre-installed across common devices are fairly readable, web font technology has allowed us to do better than just the default options. More and more amazingly designed typefaces are available to us everyday.

The next most important consideration is how a particular typeface represents your brand. You may think this isn’t all that important, but please consider the following comparison of two popular news sites (original credit for this comparison belongs to Jason Pamental):

A comparison of the web fonts on the BBC News site on the left and The New Yorker site on the right, both presented as they appear on an iPhone, without their logo or name.

The image on the left could be any site in the world. It’s a standard system default typeface set in a single column, with just enough differentiation to call out headings vs body text. The image on the right should be instantly recognizable to you, even without being able to see the publication’s name (it’s The New Yorker, just in case you live under a rock). The typeface conveys the brand in absence of the normal identifying information, which disappears as a user scrolls. When someone is linked to this article, the typeface helps enforce the brand and says something about the quality of the content they find there. The first example could be anything. It could be Fox News, the National Enquirer, or the BBC. Without the strong branding enforced by the typography, you miss the underlying reassurance of a respected organization.

“Google Fonts has a ton of typefaces, and they’re free! Can’t you just find something there?”

This statement is technically correct. There are a great many options available on Google Fonts, some of which are of exceptional quality, and all of them are free. But there is also an overwhelming number of terrible fonts, making it incredibly easy for a novice to pick a typeface that makes your site worse than a default would have been.

Another consideration is that every other client has the same thought. If everyone ends up using one of the few lovely free Google Fonts for their work, like Open Sans, then we end up with the same problem presented by system defaults: the branding disappears as your site blends in with the rest of the background noise of the web.

You’re also at the whim of a company that is focused far more on performance than on great visual design. These considerations must be balanced, and several other platforms do a great job with this balancing act, but Google Fonts puts performance far ahead of any other considerations. Many font features are either unavailable or have been dropped from Google’s version, such as the information that controls optimized spacing between letters and advanced design features (see Brick’s catalogue for the full versions). While these enable faster downloads for your users, they also sacrifice features that improve the reading experience. Personally, I prefer to be able to make those choices myself based on the constraints of the project at hand (Font Squirrel’s web font generator will give you access to these options if you start with the full version of a typeface).

“Ok, but other services aren’t just paid, they’re expensive, right?”

There are as many different pricing schemes as there are web font providers, but many are quite reasonably priced.

The preferred paid option for many clients is a one-time expense, as it makes budgeting easier and removes ongoing payment as a concern. One provider that supports this is MyFonts.com, which provides a large number of high-quality typefaces. Depending on the number of typefaces/styles you need and the quality of each individual font, an appropriate set for your site can cost anywhere from ten dollars to several hundred dollars (some complete families cost in the thousands, but represent a number of styles far beyond what’s recommended for the sake of performance and visual clarity). This expense is justified and well worth it for larger projects though. For any significant project, that cost is a drop in the bucket compared to the overall value delivered to your users by a high-quality typographic system thoughtfully applied by a talented designer. And because it’s a one-time expense, it’s roughly equivalent to the first year of use for a paid platform with a similar typeface.

Even the subscription costs can be well worth it. What you lose out on in simplicity and predictability you gain in flexibility and ease of management. A platform such as Fonts.com, Cloud Typography, or Typekit can range in price from free (for a limited selection and low page-views) to several hundred or thousand dollars per year. You also have the freedom to scale your payment plan in step with the traffic to your site, which can help you manage costs more effectively as you grow.

Fonts.com has many exceptional classic typefaces and a wide variety of payment plans, from free up to $100 per month for unlimited usage and up to 2.5 million pageviews per month. You can scale up further if your pageviews exceed this. And if they do exceed this amount, then for the sake of your business I hope that expense becomes meaningless to you. The higher payment tiers also give you access to better design features and allow you the ability to self-host your fonts – removing a dependence on JavaScript to load typefaces and letting you target only the devices/browsers that best support web fonts. This can give developers the flexibility they need to make your site perform exceptionally.

Cloud Typography, from Hoefler & Co., is another excellent option. While the selection is much more limited, the quality of every typeface offered is extremely high. They have a reputation for being expensive for desktop fonts, but their web fonts are actually comparable to the other leading services. Subscriptions start at $99 per year, and 3 million page-views only costs $49 per month versus the $100 per month for 2.5 million page views that Fonts.com offers. Their platform is also well-known for giving designers a huge array of customization options that help them balance visual design features with performance concerns. Cloud Typography also offers a payment plan that gives designers access to the desktop fonts so they can use them in popular visual design software without incurring additional expenses.

Typekit is another great choice. They were bought several years ago by Adobe (creators of most of the software your designers or your consultant’s designers are already using). Because of this relationship with Adobe, their web fonts sync with the desktop fonts designers are already frequently using in their work. You can get 5 million page-views per month for $100, the same price as 2.5 million page-views per month with Fonts.com. In the past they’ve been focused more on design considerations than on performance, but recently they’ve added newer features to help designers control performance as well. For many designers, Typekit represents the greatest ease of use and compatibility with their workflow.

Let’s make a decision

While the costs associated with these platforms aren’t insignificant, they’re well worth it for any company that wants to have more options for typefaces that can represent their brand well and give their design/dev teams more features to work with when optimizing visual design and performance. You simply can’t get this level of control and choice with the free fonts offered by Google.

We believe that a discussion of web font platforms is important to have early in a project, to keep clients from being assaulted with a surprise cost and so that developers and designers have a known set of reasonable constraints to guide their decision-making. Given the strategic needs of your project, each of these different platforms will present a different set of pros and cons, and it’s up to your project team to work out a decision. If your team or your consultants aren’t starting this discussion, then you need to bring the topic up. Of course, you can always call us instead.

Header image adapted from original image by Flickr user Edinburgh City of Print with a Creative Commons Attribution 2.0 Generic license.

About Fresh Tilled Soil

Fresh Tilled Soil is a Boston-based user interface and experience design firm focused on human centered digital design