Typekit

Typekit is a font replacement tool for web development that’s generating a lot of buzz. Font replacement tools allow you to use whatever font you want on your website (not just Georgia, Arial and other standard fonts). Cufon and siFR have already solved some of the problems with embedding fonts, but these existing solutions usually involve messy flash implementation or leave the font files open for download. Typekit is attempting to solve those problems by using @font-face and getting type foundries behind the idea by protecting their font files while still allowing them to display on any webpage.

Invitation Process

Typekit is currently in “beta” if you want to call it that. You need to sign up and wait for an invitation or keep an eye out on twitter for people giving them away. I got my invitation in my inbox recently and, needless to say, I was excited to try it out.

After I click on the invitation link in the email, I’m presented with a signup form asking for basic information. Typekit does a good job of not asking me for too much info. Do they really need my phone number? No, so they don’t ask for it.

Bonus points: When landing on the page, the Typekit robot programming ninjas behind the beautifully minimalist sign up form had already filled in my email address. I filled it out before when asking for the invitation so why should I have to do it again? This step may go unnoticed by some people, but those who do notice it will giggle in a fit of joy because they get to start playing with Typekit seconds sooner.

Typekit offers four different service plans. There is some variety to the plans, but conspicuously absent is a “freelancer” plan. I was hoping to see a plan for people who make websites for different clients. This type of plan would have:

• Relatively high bandwidth
• Full font library
• At least 5 fonts per site
• Ability to use on many websites (upwards of 40)

Currently, the best solution for me would be to have each client pay $49.99 a year for the service. This definitely isn’t a bad deal, but I would’ve liked to see a plan with all those features for about $50 a month.

Bonus points (for the Typekit guru): The Typekit plans page lets me know what each feature is with a simple tooltip that clearly explains the feature.

Maiden Voyage

The first page I see once I sign up is an intro page explaining how Typekit is going to work.

This screen does a great job of telling me how to get help, what browsers Typekit works in, and how to install it. It’s as if someone is sitting next to me at my computer giving me the elevator speech about the basics of Typekit.

Suggestions

• Make the copy a little more concise. It isn’t a lot to read, but it is the only thing standing between me and playing with Typekit so I want to get through it as fast as possible.
• Add visuals to emphasize the text and help me scan it quickly. Add browser icons for what Typekit supports (similar to how video games and software boxes have the PC and Mac compatibility logos). Have images or big links to your Get Satisfaction page and email address. Add a picture of the colophon in context of a real website. From reading the paragraph, I’m not clear on what exactly a colophon is.

Adding a Typekit

This screen introduces the concept of a kit to me. It tells me what it is in a conversational tone that, again, makes it feel like someone is in the room showing me how to add a kit. This makes the app more fun and easier to use by breaking down typical barriers between the computer programs that run web apps and the actual humans using them.

What This Page Does Well

• Uses conversational language. Instead of “Enter kit name here” it is “Start by giving the kit a descriptive name”
• Uses personalized inline examples. It makes me smile to see that Typekit has suggested calling my kit “Kevin’s site.”
• Doesn’t include unnecessary fields. I can’t schedule a time for Typekit to apply itself to the site. I can’t add custom port numbers. I can’t pick the fonts I want to use while first creating the kit. Typekit saves that choice for a later step to help break up the entire process and make it more manageable from a usability standpoint.

Installing the Javascript

This step couldn’t be any easier. Unlike other font replacement tools, I don’t have to install a flash plugin or upload any special files to my server. All I do is put this code in the element on each page. It also tells me that this code will only work on iloveusability.com (the domain I added in the previous step) and gives me an option to change it right there. This is a great example of presenting the user with options when he or she needs them most.

Bonus points for the Typekit JS geniuses: What is absolutely everyone going to do with their installation code? Copy and paste it. Typekit knew this and made it easier to highlight all the text. When you click inside the box, all of the text is instantly highlighted for you. It saves me two clicks and a split second, but this shows how Typekit takes usability seriously and makes subtle changes to make the installation process easier for their customers.

Adding Fonts to Your Kit

This font library page uses excellent typographic hierarchy to emphasize the important information about each font. The font demo takes precedence over everything else because it is larger. When you come across a font that strikes your fancy, you look at the listing from left to right and end up at a button that instructs you to “ADD” the font to your kit. This demonstrates well designed and natural flow between seeing an item and instructing a next action.

What This Page Does Well

• Each listing has a clear main action and a secondary action. “ADD” is a green button that contrasts from the background attracting the most attention of users. “View” is a secondary action link that is important, but not as important as adding it to your kit.
• Padding around the little pagination links at the bottom. Typekit makes their pagination links more usable by increasing the clickable area of each number. .pagination a { padding: 3px; } is all it takes.

Suggestion

• Make the “ADD” button act like a physical button. Change the background to a darker green when you hover over it. Make it simulate being pushed down when clicked (click any button on Atebits to see what I mean).

Typekit Editor

Whenever you click to add a font to your kit, a nifty Typekit Editor pops up in a different window (or tab). This allows you to edit how each font in your kit applies to different areas of your page. It uses CSS selectors, a wise choice by the Typekit guys and gals. CSS selectors have become second nature to anyone skilled enough to replace a font on a page, so they present a usable and convenient way to target specific page elements.

When you first add a new font to your kit, Typekit automatically adds a CSS class you can use directly in your HTML. If I want to use it, the first thing I’ll try to do is copy it and unfortunately things get squirrelly from there:

I try to copy the selector, but end up accidentally deleting it. I have no way of highlighting the font’s default selector. It would be nice if there was a “copy” Javascript action similar to the installation of Typekit I talked about above.

Three Areas of Concern

1. The “Publish” button is all the way at the bottom right corner of the screen. This could go unnoticed by a person who is new to the app and has to scroll to see the button. There should be some kind of warning when I try to close the window without publishing the fonts, like you see in desktop programs when you try to close a document without saving it.
2. The kit editor completely stops working when Javascript is turned off. This may not be a big concern because Typekit’s audience is going to be mostly web designers who are very likely to have Javascript on. Nonetheless, it is an edge case to think about when you’re developing your own web app.
   
3. The “Kit Settings” lightbox is a quick and convenient way to edit the kit’s basic settings, but there needs to be a better way to close the box. Currently, I can’t click on the background shadow to close it and there is no “X” at the top corner like in desktop programs. All it would take to fix this problem is to add a close icon to the top right, like in the “Embed Code” lightbox.

Overall, the Typekit Editor is a beautiful and usable interface that always makes it clear as to what font you’re editing. The use of typographic styles to emphasize and attract attention to meta data is especially nice.

Typekit’s Performance

When I tested it, Typekit performed well, but how it will perform under a heavy server load remains to be seen. It will probably always work for a small web app or blog, but if Twitter decided to implement it on every profile page, how would it react?

Take a look at Typekit loading with and without a full browser cache:

Without Browser Cache

With Browser Cache

Benchmarks

Here are some request times for various scenarios on my Typekit demo page.

Pictures of Demo Page with Typekit (compared to the original page)

Overall

Typekit has an intuitive and beautiful user interface. It is a surprisingly fun and easy to use tool for replacing fonts on your website. It opens up a world of possibilities with its ever-expanding font library. With web pioneers like Jeffrey Veen behind it, Typekit is sure to keep pushing the boundaries of what is possible and pragmatic in web design.

# Usability Review tags: font, javascript, typography on Sep 27, 2009