Technology Review: Typekit

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.

Once you’ve selected a font, you apply it to your web domain using Typekit’s Editor panel. You can do this in one of two ways. The simple approach lets you specify in advance which “Selectors” (HTML tags or CSS classes) will use the font. For example, you can tell Typekit to apply the Calluna font to a .HEAD2 class. You hit the “Publish” button, insert some JavaScript code into your web page, and that’s it – no need to touch the CSS markup. Later, if you want to change .HEAD2 from Calluna to Droid Serif, you can do it entirely within Typekit. You don’t have to touch the web page at all, because the JavaScript code you inserted before just points to the new font.

This is ideal for designers with limited knowledge of CSS, but Typekit also provides an Advanced option for those who’d rather do their own CSS coding. Instead of identifying selectors in Typekit, you paste font-family codes into your CSS markup, along with the JavaScript code that makes it all work.

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



* The Web Designer’s Idea Book Volume 2
* Visit – Your comprehensive source of books, products and tools for designers
* Sign up to receive the HOW eNewsletter.