dcsimg

Typekit: Banishing Blight from the Browser

A new kind of startup—a font service provider—turns Verdana into Vavoom!

A few months ago, I complained how dreadful, drab, and unimaginative type is on the Web. Simultaneously, I recommended Cufón, an open source project capable of rendering text in most any font using JavaScript. To recap, Cufón converts a typeface into shapes and replaces the text of one or more HTML elements with an equivalent, dynamically-rendered image.

For example, the text “Welcome to Summer Camp” in the h1 element of this HTML page (pictured below) is an image generated on-the-fly by Cufón.

Cufón. offers some improvement over the ten vanilla fonts available in modern browsers, but has limitations. Namely, you must have the right to embed each font you use, and the final result is still a picture of text and not text itself.

The latter problem is likely acceptable. Since the image is rendered by the browser using JavaScript, crawlers can read the original text to index your page. The former problem is more insurmountable. Why? To date, foundries have been reluctant to license typefaces for use on the Web, because no technology protected against the misappropriation of the font.

Offline, piracy is precluded (albeit legally) by licensing a copy of the font to a particular user or machine. Online offers no such physical boundaries. If a typeface was a resource akin to JavaScript source code, an HTML page, or an image, it could be scraped with nothing more than its URL. It’s paradoxical: a font has to be public to be viewable, but must be kept private to protect against piracy. It’s a Catch-22 and it keeps the Web ghastly.

camp.jpg

We can send a man to the moon and tweets across the universe, but we can’t render Bodoni in a browser. Sheesh.

Ah, but now we can, thanks to a startup named Typekit. Typekit offers a wide selection of fonts for use online and technology that prevents piracy. The solution is all wrapped up as a service: just subscribe, configure, embed some code, and go!

Think of Typekit as an FSP, or Font Service Provider. Typekit hosts the fonts and delivers them straight to the browser.

Getting Started with Typekit

Typekit is currently in closed beta, but I was granted early access to put the service through its paces.

As with any online service, I start by creating an account. At the moment, there are four tiers of service to choose from. A trial account is free, but limits bandwidth to 5 GB per month, and restricts usage to one site and two fonts. Your font selection is limited and per the terms of the trial account, you must also display the Typekit badge. The next three tiers offer more bandwidth, more fonts, and more liberal use.

For example, the Portfolio tier is currently priced at $49.99 for one year of service, including 50 GB per month of bandwidth, three hundred or so typefaces, and the rights to use any number of those fonts on five sites. The image below shows some of the fonts available for Portfolio subscribers. I stuck with the trial account for this article.

fontchoices.png

After choosing an account, the next step is to create a kit, or a collection of typefaces to use on a site. I chose Terfens, a pleasant, friendly sans-serif font, and Daniel, a handwriting-like face. If your browser supports the @font-face attribute, you should see a sample of both Terfens and Daniel right here:

The quick brown fox jumped over the lazy penguin.

The quick brown fox jumped over the lazy penguin.

Interestingly, after enabling the kit, this is the only code required to use the font in this site.

<script type="text/javascript" src="http://use.typekit.com/xxxxxxx.js">
</script>
<script type="text/javascript">
  try{Typekit.load();}catch(e){}
</script>
…
<p class="tk-terfens">
  The quick brown fox jumped over the lazy penguin.
</p>
<p class="tk-daniel" style="font-weight: bold;">
  The quick brown fox jumped over the lazy penguin.
</p>

The magic is the JavaScript and the class attribute assigned to the paragraph. A custom font can be applied to any HTML element, class, or ID on a page, using a common CSS selector. Everything is configured in your kit, which is pictured here.

kit.png

The box at top-left collects the CSS selectors for the selected face (at right). An element that matches any of the selectors is styled accordingly. You can see there are variants of the typeface in the box immediately below. And at bottom, you can choose what typeface is shown if the browser is incompatible.

And that’s it! What could be easier? How about specifying the fonts in your own CSS?

h1 {
  font-family: "terfens-1","terfens-2";
}

You can also include a fallback font for older browsers by listing it after the Typekit font-family values.

h1 {
  font-family: "terfens-1","terfens-2","sans-serif";
}

(You may be wondering why two Typekit font-family values? According to the site, each of the files is a segment that includes a portion of the font. Typekit “splits requested fonts into multiple files to make them less usable as installable fonts, and recombines them using the CSS font stack.”)

To find the names to use in your CSS, click on the Advanced link at the bottom-right of the Selectors box.

Better yet? You can cut-and-paste the stylized text.

I’m Sold!

I love Typekit! The annual fee is a pittance if you amortize the cost over a number of sites, and really is quite reasonable even if you subscribe just for your blog. The first paid tier is only $24.99 and should suffice for all but the pickiest designers.

Go to the Typekit site to get on the waiting list. My eyes will thank you.

And remember: One or two fonts per page goes a long way. Happy tinkering!

Comments on "Typekit: Banishing Blight from the Browser"

idallen

So if the Typekit site is down, your page won\’t render?
And they get a record of every person displaying your pages?

Reply
dragonwisard

I think what we really need is a more fonts that are free of these restrictions, not a font obfuscation service.

Reply
ddennedy

idallen: if the site is down, the page still renders – just not using the font you want. This is the same as today when user does not have a font you specify in CSS.

dragonwisard: I think what we need is a way for more people to make an income to feed their families.

Reply
golding

ddennedy said: \”What we need is a way for more people to make an income to feed their families.\”

True, however it seems there are ways of doing this without making everything propriety. There are plenty of examples, even in the font factory field.

Reply
hjmangalam

So the web is ghastly. As to a lot of content, I\’d agree. And here we have a way of rendering ghastly into even more ghastly visuals thanks to a proprietary DRM technology that promises even more protocols, JS, and bugs between us and that which we wish to read. None of the fonts displayed here are attractive at all, nor have I ever wondered to myself \”Why can\’t I read that NYTimes article in Vasectomy font?\”

In the grand scheme of things this ranks slightly below my concern about Kate and whatshisname.

Reply
spyderwebtech

The problem with this typekit service is that they are trying to use the @font-face method which is not compliant on all browsers… I am viewing this article on Firefox and I can\’t see any of the fonts. :(

What most people don\’t realize is that they can do font-embedding themselves, or for the technically inept the can use a non @font-face service (fontmeup.com is one) service which is cross-browser compliant.

Whatever blows your skirt up I guess…

Reply
porridge

So what exactly prevents me from using the use.typekit.com/xxxxxx.js URL (that another user X has paid for) on my website? Is it just the Referer headers?

Reply

I simply wanted to develop a brief note to be able to appreciate you for those amazing hints you are giving out on this website. My time-consuming internet look up has at the end been recognized with brilliant points to share with my co-workers. I ‘d believe that many of us readers are truly fortunate to dwell in a wonderful website with very many lovely professionals with good solutions. I feel quite fortunate to have encountered your site and look forward to so many more pleasurable moments reading here. Thanks a lot again for everything.

Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>