Thoughts on Typekit with Typekit

®

For so long I’ve had to gaze on Arial and Helvetica competing for my love. I’ve watched as Times New Roman and ugly older sibling Times read old crumbling newspapers. In a corner I’ve spied Courier New and lazy cousin Courier trying to play Atari cartridges in a broken NES and program in Basic.

Not Today!

Today is for Typekit.

(apparently that really depends on how well your web browser is made) Internet Explorer likes things really simple and only works half the time (click for sample)

Typekit is an attempt to bring commercial typography to the web. It’s a Jeff Veen & Small Batch joint and you can read about their efforts at the Typekit blog.

Typekit is web typography as a sevice. Your Typekit account gives you access to a library of fonts that you can use on your website. You use some special javascript that Typekit gives you to put in your HTML. You access the Typekit Kit Editor on the web (of course!). It has nice simple interface where you add fonts to your website kit. When you publish your kit the magic happens. You use CSS selectors assigned to the typefaces at Typekit in your HTML. If your visitors have a suitable web browser they see your Typekit fonts. If their browser sucks they see those tried and true (or tired and old) web safe fonts we normally see.

Typekit has monthly and annual pricing structure (I won’t mention since the service isn’t totally live yet, but it seems fairly reasonable for now).

This page is a sample using a trial account. You will see the Typekit badge in the lower left right if I haven’t upgraded to a paid account. I’ve thrown in a few small things to test the fonts in weird float situations.

7 Responses to “Thoughts on Typekit with Typekit”

  1. Ron Domingue says:

    I love the concept of TypeKit and it’s implementation. I know it is being presented as being Web Standards compliant but lets face the unwritten rule that if I wanted place a typeface I purchased from a vendor on a website I will either be using Sifr or Cufon.

    Simply it will be hard to justify paying yearly for a service that a lot of clients won’t find necessary. Sure it will appeal to a lot design types, myself included and I can stealth the cost in to some services I provide but it has to get wider adoption than just they type geeks.

    What happens if Adobe or another the major foundry decides to open source their type for the web? Again I like the service and will probably use it but I’m not sure it’s the best solution for getting better fonts on the web.

  2. No major foundry is going to open source their type for the web. That’s just crazy dreaming.

    As for Sifr and Cufon, neither of them produces acceptable results for body text, and both are fundamentally hacks. Sifr also has less than stellar performance for large amounts of text.

    More importantly, you are either assuming that it’s legal for you to use Sifr or Cufon with the fonts you’ve licensed (not purchased) from a vendor, or you don’t care. But for those who do care, it’s worth noting that many foundries do not allow such usage with their fonts under their standard license terms.

    Cheers,

    T

  3. Jess Planck says:

    Standardized web font techniques started in the late 90’s but the problem is the same as music, movies, and TV. Easy to steal a font and use it elsewhere.

    Sadly there will be a pay-gate for web typography. It will either be DRM or services like Typekit. Cufon and SIFr are replacement techniques using plugins that create more overhead and complexity than the standard font-face which should use the operating system type rendering. Cufon actually has a method to repackage a font to open-type for font-face compatibility. But as mentioned you are restricted by the license that comes with the typeface.

    There are fonts out there already for font-face.

    The point is that services like Typekit will start to appear. The competition will hopefully create some good choices in new web typography market that never existed before.

    Also remember is up to designers to educate clients about typography. Many people don’t know or care about the effort or reasons for good typography. Put these tools to the test and clients might go for it if done right and shown along side web-safe font designs.

    At the very least folks will update browsers just to see the fonts.

  4. Jess Planck says:

    BTW Typekit fails on iPhone. I’m not sure if iPhone Safari supports font-face or not. More browser test notes tommorow.

  5. Jess Planck says:

    Finished my browser tests with Typekit. Looks like Firefox and Safari win big. Chrome stable doesn’t work, but I’ve heard Chrome beta does. I only wanted to test with stable browsers.

    Not surprising Internet Explorer looses again in weird and unusual ways. It apparently only wants to show Typekit fonts when it feels like it. It’s working a little better today.

    During testing I did remove the lightbox javascript for this site since it causes console notifications. I created a very simple sample document that is now linked from the top of article. This page has one HTML validation error. The sample linked above is fairly simple with no validation errors and is XHTML-strict.

  6. Ron Domingue says:

    To be fair I don’t think any foundry will open source it save for maybe Adobe.

    http://www.designbyfire.com/?p=30

    Body copy text to be frank really doesn’t bother me most of the time if the line height and the type is set correctly. The fact that it doesn’t work on the iPhone or IE (I hate it too) is a shortcoming especially if I’m paying for a service.

    Honestly though you and I may care about DRMs or licenses for fonts but many don’t.

    Besides this is achieved without Typekit, Sifr or Cufon: http://www.seedconference.com/seed.php

    I think it’s a great idea all I’m saying is that it’s a tough sell. They will do well within the inner circle of web type designers but outside of that I doubt they get much adoption.

  7. Jess Planck says:

    The Wikipedia article is really good on this one. I remember being excited and disappointed at the same time with Netscape 4 and TrueDoc support (ugly is a kind word):

    http://en.wikipedia.org/wiki/Web_typography

    The seed conference example is perfect for showing how CSS hacks are bad for accessibility and seo. When they cut up a word like “Crown” with spans to make a drop cap it actually becomes “C rown”. Search engines and screen readers might not put the word back together. The proper thing would be use a drop cap font with proper glyphs so you wouldn’t cut up the word with span tags.

    There are many ways to make that example accessible (jQuery, php, CSS :first-letter), but nothing would be simpler than having the right typeface for the job in the beginning.

    I doubt it will be tough sell for my clients (another story for my day job at nicholls.edu, it’s hard to buy pencils right now). For freelance I do mostly sub-contract work for designers and design studios. The designers are always asking for custom fonts on websites and I pull out SIFr or SIFr2 most of the time with huge performance issues. Those designers have clients used to paying thousands of dollars a year for billboards in bad locations. They generally pay less than $150 a year for a website. Another $25 or even $50 to make the website more attractive won’t be a hard sell. It will beat the price (sometimes the effectiveness) of the billboard hands down.

    My clients are given HTML roughs on-line not jpegs most of the time. It will be easy for me to design with something like Typekit and give the client a choice. I know in most cases the better design is going to win.

    @font-face has been around since CSS2. (see https://developer.mozilla.org/index.php?title=En/CSS/%40font-face) but typographers fear the internet more than Lars Ulrich ever did. Now Typekit has a few competitors; http://fontdeck.com/ and another I can’t find. The point is that foundries have a method to protect those font files they have been reluctant to let us use on the web.

    Now it can only get better or worse.. in a David Carson “Raygun” sort of way.

Leave a Reply