Typography and web design have long had an uneasy relationship. Until recently, if you wanted to go beyond the limited web-safe fonts on most computer systems, you had to render type as bit-mapped graphics, or maybe use plug-in technologies such as Flash. All major browsers now have the ability to link to fonts stored on remote servers, but the software licenses that accompany most fonts generally prohibit their use in this manner.
This has given rise to a new breed of online services that provide a legal way for web designers to access high-quality fonts. The fonts are licensed from established foundries or type designers specifically for web hosting, and in many cases the fonts are optimized or re-designed for screen display. A few of the companies behind these services are foundries themselves.
In most cases, you don’t download the actual font files. Instead, you select the fonts from an online library and specify the websites where you want to use them. Each service then generates brief snippets of code that you paste into your web pages. When someone visits your website, the browser downloads a copy of the font from the vendor’s server. The end user can then view your design with correctly formatted type as if the fonts were installed on their own computer.
The fonts may add a bit to the download time, and some users may notice a brief flash as the browser replaces default system fonts with downloaded ones. Otherwise, the process is transparent. And though the fonts are downloaded, you’re not giving them away as freebies—the technologies underlying these services limit use of the fonts to the pages you’ve specified.
I looked at five of these services: Typekit from Small Batch Inc.; Fontdeck from Fontdeck LLC; Fonts.com Web Fonts from Monotype Imaging; WebInk from Extensis; and Webtype, a joint venture of The Font Bureau and Ascender Corp.
No programming skills are required to use these services, but you’ll need at least a basic understanding of CSS. The services work with the vast majority of web browsers, though it’s still a good idea to specify alternate fallback fonts for those few users who might be left out.
How much does it cost?
The key differences among these services include their pricing models, user interfaces and the range of fonts they offer. None of these services allow you to purchase the fonts, though some will make arrangements by which you can host them on your own server. That’s uncommon, however: in most cases you pay monthly or annual subscription fees that let you link to fonts on the vendor’s server.
Fontdeck has the simplest pricing: You pay an annual fee for each font and that’s it. Pricing for the others depends in large part on web traffic — the number of users who visit the sites and download the web fonts. However, head-to-head comparisons are tricky because each vendor measures traffic in different ways. Monotype and Small Batch use subscription tiers based on monthly page views: one price for up to 500,000 page views, a higher price for a million page views, etc. As any web producer knows, page views can vary from month to month, but most should still have a pretty good idea of which tier is likely to apply.
Extensis and Webtype base their fees on font bandwidth, meaning the total file size (in GB) of downloaded web fonts. You might pay one rate if site visitors collectively download up to 3GB of fonts, and more if it’s up to 9GB. This bandwidth can vary widely based on web traffic, the number of fonts on each page and even the size of the character sets. You can already hear the bookkeepers howling—websites measure traffic in all sorts of ways, but font download bandwidth is not among them. Both companies help you deal with this by estimating the likely bandwidth based on the number of unique monthly visitors. Extensis even provides a calculator: you enter the average number of site visitors, the number of fonts per website and the character set you want to use, and the calculator tells you which pricing tier most likely applies. Tiers for both services are broad enough that you should be able to find a good fit, and they’ll also negotiate custom pricing for large enterprise sites.
Netflix vs. iTunes
Beyond the way they measure traffic, each service uses one of two models for providing access to its font collections. One is similar to Netflix, in which you pay a monthly or annual fee that lets you use any fonts in its collection. The other model is more akin to renting videos on iTunes: You sign up for free, browse through the library and then pay an annual fee for each font you want to use. Extensis, Monotype and Small Batch use the Netflix model, whereas Webtype and Fontdeck follow the iTunes approach.
The services following the Netflix model could be the best deals if you plan to use a lot of different fonts. But in at least one respect, the iTunes model is a better reflection of how designers do business. All of these vendors offer some form of free trial, but Webtype and Fontdeck trials work on a font-by-font basis. You can choose any font from the vendor’s collection, use it in a design mock-up, obtain client approval, and then pay for it when the site goes live. Webtype lets you use its fonts for free for up to 30 days. With Fontdeck, up to 20 users (based on unique IP addresses) can view a site with its fonts before you pay for them.
The best bargain of all is not included in this review: In May, Google unveiled the absolutely-free, no-strings-attached Google Font API. Don’t let the “API” scare you—it doesn’t require programming skills and operates much like the other services mentioned here. The only catch is that it’s limited to a small number of public domain fonts. It’s still in beta mode, but in the Google world, “beta” is often equivalent to “Version 1.0” at other places.
- Want to learn about web design? Visit MyDesignShop.com.
Previewing Your Work
All of these services let you specify a localhost web domain, an important consideration if you want to preview the fonts within your designs on your own computer. To do this, you set up a local web server and place your site in the server’s designated folder. If you point your browser to this location (such as http://localhost/pagename.html), you’ll see your design with any fonts that you’ve specified.
I also found that I could preview web fonts in Dreamweaver CS5’s Live View mode, though this capability isn’t documented by any of these services. You’ll need to use Dreamweaver’s site manager to designate your local computer’s server as a testing server, and you may have to check “Use Testing Server for Document Source” in the Live View menu (see screen shot).
Dreamweaver CS5’s Live View function lets you preview linked web fonts in your designs. The screen shot on top shows a page with the web fonts enabled. The one below shows the same page with the fallback system font.
Let’s take a look at each of the five services.
Introduced in 2009, Typekit was one of the first web font services. It’s easy to use and a relative bargain compared with its newer rivals. I like the user interface and the way Typekit classifies the fonts. Most of these services let you browse fonts by style (serif, sans serif, script, etc.) or foundry, but Typekit also tags its fonts according to design characteristics, such as “historic,” “techno,” “business” or “casual.” Fonts are also tagged according to whether they work best for headlines or paragraph text. Better yet, you can filter your searches by multiple characteristics, such as all sans serif fonts with historic designs suitable for use as paragraph text.
Small Batch Inc., the company behind the service, recently enhanced its offerings by adding a collection of Adobe typefaces optimized for screen display.
If you’re using the Windows version of Dreamweaver, you won’t be able to preview the fonts in Live View mode, but the company says it’s working on a fix. Until then, Windows users will have to preview the pages using a browser pointed to a testing server.
The company uses a subscription model in which you pay an annual fee based primarily on monthly page views. Design pros will most likely opt for the “Portfolio” plan ($49.99 per year), which accommodates up to 500,000 page views per month, or the “Performance” plan ($99.99 per year), which raises this to 1 million. Both provide access to Typekit’s full font library and let you use an unlimited number of fonts on an unlimited number of websites. Enterprise pricing is also available.
If you want to test the waters, Typekit offers a free Trial plan that limits you to one website, two font families and 25,000 monthly page views. You’ll have a relatively limited font selection, and the website will display a small “badge,” essentially an ad that links to the service. Still, this should be enough to get a basic sense of how the service works, and the plan doesn’t expire.
Typekit also has a “Personal” plan ($24.95 per year) for small websites. This gives you access to a larger personal font library, with limitations of two websites, five font families per site, and 50,000 monthly page views.
Typekit lets you apply fonts to CSS rules from within the Editor panel, so you don’t even have to touch the code in your web pages.
The Editor panel also provides font-family values that you can insert yourself.
- Want to learn more about typography for your web projects? Watch a DesignCast session on web type: Fonts That Click
Monotype Imaging, a well-known name in the graphics business, introduced the Web Fonts service from its Fonts.com site in September. Similar in many ways to Typekit, its biggest selling point is its extensive font library. Depending on which plan you choose, you’ll have access to 3,000 or 8,000 fonts. This video tutorial provides an overview of how it works.
The site is reasonably easy to navigate. Pull-down menus let you search for fonts based on classification (Calligraphy, Handwriting, Slab Serif, San Serif, etc.), designer, foundry and language support. You can also search via keywords or execute alpha searches. However, you can’t filter the list based on multiple criteria, such as sans serif faces beginning with N or serif faces from a certain foundry or designer. Given the size of the font library, this is a bigger problem with this service than it would be with others. A more granular set of tags for these fonts would also be useful.
But my biggest complaint is the slow performance of the website, which lags noticeably each time you change search criteria or choose any other option. As it chugs away, you’ll keep staring at the line about the quick brown fox jumping over the lazy dog and wishing that the website were that fast.
Web Fonts has two subscription tiers with pricing based on total page views per month. These are costlier than Typekit’s subscription plans, but provide access to a broader selection of fonts. The “Standard” tier ranges from $10 per month (250,000 page views) to $80 per month (2 million page views), whereas the “Professional” tier ranges from $100 per month (2.5 million page views) to $500 per month (12.5 million page views).
Both plans provide access to the full 8,000-font library, with no limit on the number of websites or number of fonts per site. The Professional tier also offers the option of downloading fonts for use in design mock-ups.
Fonts.com Web Fonts from Monotype offers the largest choice of typefaces, but the search interface suffers from slow performance. The quick brown fox will likely run a few laps around the lazy dog before you’ve made all your font selections.
WebInk is a new web font service from Extensis, a company best known for its graphics utilities. One of those utilities is Suitcase Fusion, the popular font-management software, and WebInk’s biggest selling point is its integration with the latest version of this program. You don’t have to be a Suitcase user to take advantage of WebInk, but you’ll be missing out on some cool features.
The first step in using WebInk is creating Type Drawers where you store the fonts for each set of projects. For example, you might set up one drawer for a small-business client whose site gets 20,000 monthly visitors, and another for a bigger site with 100,000 visitors.
You can manage your Type Drawers from the WebInk site or from within Suitcase. If you work inside Suitcase, a new Web Preview function lets you see how fonts would appear on any website — your own or someone else’s. Want to see The New York Times in Bodoni Old Fashioned Bold Italic? Give it a try. You can test the font on the entire site, or specific blocks of type. The feature works with fonts stored on your own system in addition to any WebInk font.
Another cool feature is QuickMatch, which lets you select any font and search for typefaces with similar designs. This could be useful if you have a font on your system and want to find similar WebInk fonts to add to a Type Drawer.
Once you’ve chosen the fonts for a project, you can use either Suitcase or the WebInk site to generate CSS rules for your web designs. Web pages encoded with WebInk fonts can be previewed in Dreamweaver CS5’s Live View mode.
You can search for WebInk fonts from Suitcase or the website. However, the site isn’t well organized. You might think you can go straight to the Explore Fonts section to add fonts to a Type Drawer, but instead you have to go to a section labeled My Type Drawers, open a Type Drawer and click on “Add Fonts.”
WebInk has the most complicated pricing structure of the services I looked at: four tiers based on site traffic and another four based on which font collection you want to use, for a total of 16 options. Most designers can probably narrow this down to four: The Pro tier (small business websites) with either the Standard ($19.99/month) or Premium ($29.99/month) font collection, or the Business tier (large businesses or e-commerce sites), again with the Standard ($39.99/month) or Premium ($59.99/month) collection. The Standard and Premium collections provide access to 2,031 and 2,097 font faces respectively. The other font collections, Budget and Promotional, are limited to 46 and 13 faces, respectively.
Pricing is further complicated because Extensis figures site traffic based on font downloads rather than page views. It’s so complicated that the company provides an online calculator to estimate the font bandwidth. One example: 100,000 monthly visitors X 2 font faces X a full character set = 15GB, or the Business plan. Change font subsetting to English only, and download volume drops to 5GB, or the Pro plan. Custom enterprise pricing is also available.
Each Type Drawer is priced separately, so you can assign the drawers to different clients based on their site traffic. Each drawer accommodates up to four websites. Extensis offers a free 30-day trial for WebInk, and a separate 30-day trial for Suitcase Fusion.
You can manage Type Drawers from Suitcase Fusion 3 or the WebInk site. The site offers more-extensive search options, but the navigation is a bit confusing.
The web preview in Suitcase Fusion 3 lets you test WebInk fonts on any web page.
On second thought, maybe Bodoni Bold Italic isn’t such a good idea here.
- Tune in to the DesignCast Everything You Need to Know About Typography: Web Fonts.
Webtype, which launched August 20, has an impressive pedigree. It’s backed by The Font Bureau and Ascender Corp. Its partners include noted designers Roger Black and Petr van Blokland, and font quality is one of its hallmarks. In addition to manually hinting existing fonts for optimal screen display, the companies behind the service have introduced a new series of typefaces, branded Reading Edge, designed for on-screen readability at small pixel sizes. The number of available fonts is currently limited, but the companies say they’ll be adding new ones in the coming months.
Unlike most of these services, Webtype uses a pricing model in which you pay an annual fee for each font you use. You do this via a familiar e-commerce interface in which you search for fonts and then add them to a shopping cart. Once you’ve paid for your order, Webtype provides a link code and sample CSS rules so you can use the fonts.
The interface is reasonably easy to navigate, but could use some improvement. One especially useful feature is the ability to search for fonts according to intended use: “Small” retrieves fonts optimized for readability at 9px to 14px; “Medium” gives you fonts best rendered at 14px to 48px; and “Large” locates fonts best used for big headlines. You can also search by style categories (Serif, Sans Serif, Script, Decorative, Sign & Symbol) and type foundry. However, you can’t do combined searches, such as sans serif fonts optimized for medium sizes. This isn’t a big problem given the relatively small number of fonts in the collection, but as it grows, I would hope that the developers provide a more sophisticated search function.
Another quibble is the inability to do multiple font selections when filling the shopping cart. If you want to use all the fonts in a certain family—such as regular, italic, bold and bold italic—you have to add each one at a time, and then navigate back to the main font screen to reselect the same family.
Webtype’s prices are based on which fonts you choose—some are more expensive than others—as well as monthly web traffic. This is another service that measures traffic in terms of font-download bandwidth rather than page views, making price calculations more complicated. As with Extensis, the service estimates likely bandwidth based on monthly site visitors. You can choose from various character sets to minimize each font’s download size, including a Custom Text option for situations where you’ll be using the font for a single character string.
The least-expensive fonts cost $10 per year for a “Personal” site (1GB of monthly bandwidth, or about 30,000 visitors), $20 per year for a “Standard” site (3GB of monthly bandwidth/100,000 visitors) or $70 per year for a high-traffic “Business” site (18GB of monthly bandwidth/600,000 visitors). The Reading Edge fonts double the cost at each level: $20 per year for a Personal site, $40 per year for a Standard site or $140 per year for a Business site. Sites that exceed 600,000 monthly visitors should inquire about enterprise pricing.
Keep in mind that each font face counts as a separate font—if you want a font family in regular, italic, bold and bold italic flavors, multiply the above prices by four. You can try any font on a free 30-day trial basis, which enables you to use it in preliminary designs and for client approval. As long as you stay within the time limit, you won’t have to pay for the font until the site goes live.
One of the companies behind Webtype, Ascender Corp., offers a similar service called FontsLive that’s limited to its own typefaces.
Webtype lets you search for fonts by category, foundry or intended use.
Webtype’s new Reading Edge fonts are designed for readability at small pixel sizes.
Fontdeck is the brainchild of two companies, Clearleft, a web design firm in the U.K., and OmniTI, a Columbia, MD-based software developer. Compared with the other services here, it’s refreshingly simple. No need to juggle price plans or calculate font bandwidth—you just pay a flat annual fee for each font, regardless of site traffic.
The procedure for selecting and using the fonts is similar to those of the other services. You can browse the font collection by style, tag or design classifications such as Baroque or Neo-classical. The range of tags is almost overwhelming—I count nearly 500—but you can easily ignore them. The irony is that this is a relatively small collection, with just 412 font families as of late November (if only Monotype had a system like this for its 8,000 fonts).
Once you select a font and assign it to a project, the service generates a link code and CSS rules that you can paste into web pages. You can specify a localhost domain if you want to test the fonts on a local server. Users of Dreamweaver CS5 can preview the fonts in Live View mode.
Annual pricing begins at $2.50 per font, with the average being $7.50. I must have expensive tastes, because the fonts I chose for testing—Cochin in Roman, Bold, Italic and Bold Italic styles—cost $12.50 each.
The bookkeepers at HOW will be glad to know that I took advantage of Fontdeck’s trial plan, which makes each font free for the first 20 visitors to the website (based on IP addresses). So you can mock up a website, share it on a local server with clients or other team members, and then pay only when the site goes live. I think most designers will prefer this over Webtype’s 30-day trial, which can easily expire in the middle of a project.
Fontdeck lets you search for fonts by style or tag.