Why I Love Typekit Fonts But Won’t Stop Using Google

Many of you know that over the past year my affection towards Google Fonts has borderlined “font stalking”, and those who really know me know that I developed a huge font crush with the Oswald.

While I still like what Google is doing, I have to admit the past few days I’m smitten and having a rampant love affair with Typekit.

Like every good steamy love story there’s a chance encounter that took place, and mine is a result of mindless web surfing this past weekend.

I was looking around the internet for design inspiration, and as I always seem to, ended up on the website of Jason Santa Maria – who, if you don’t know him, is one of the best designers on the planet.

After spending minutes in awe of his site, I landed on his About page, which states that he’s the Creative Director of Typekit. So I headed over there to check things out.

Love at First Sight

Most romance stories have a moment when two sets of eyes meet, and the beginning of my passionate novel is no different.

I was immediately enamored with the typography and the color palette of Typekit’s website. Maybe that’s a bi-product of being acquired by Adobe, but there was definitely curb appeal upon my arrival.

To be honest, I actually felt like putty in their hands, because the experience I had while I was there was so good that it left me with no option other than to buy something before I left.

Within minutes, I opened up my wallet and purchased the Portfolio plan which gives me full access to their font library and can use their fonts on as many sites as I’d like.

Rounding First Base

I can make references with how quickly we got to second base, but I’d rather keep things simple and say that it didn’t take long before I had implemented Proxima Nova here on my blog.

I move fast in life, but Typekit made it really easy to get there.

I’ll save the “How to Install a Typekit Font” thing for another day, but what I will say is the picture I had of installing it (and the lack of time it took) was completely wrong.

Completely wrong.

So I spent a few hours yesterday and updated StudioPress to include a few of the Typekit fonts as well. And as the saying goes… Easy Peasy Lemon Squeezy!

Switching Font Teams

Although my experience with Typekit has been nothing short of sensational, please don’t think that I’ve completely dumped Google Fonts. There’s a place in my heart for them, and always will be.

Because Google Fonts are free to use, we’ll continue to use them on our themes at StudioPress. We have no intentions on using Typekit, as I don’t feel it’s right to make a demo look great only to be followed with “if you want your site to look like this, you need to purchase a font.”

What I will say is that on any of the custom design projects I’m involved in, I certainly plan to use Typekit as much as possible.

And I thank Jason Santa Maria for that.

What’s Your Take?

Ok, enough about me and my newfound infatuation.

How about you? Have you used Typekit at all, or Cufon for that matter? How do they compare, in your opinion, to Google Fonts.

What are your favorite fonts? Let’s talk about this below in the comments!

Email Newsletter

Like what you read here in this blog post?
Get more like it delivered to your inbox daily.

Comments

  1. says

    I like the speed of Google fonts over cufon, but have felt limited with the available Google fonts.

    Enter Typekit.

    I started using Typekit to match a font on the customer’s logo. And then I fell in love and am now experiencing font ADD on my own site.

    Jury is still out on the speed of Typekit. I don’t like the visual ‘bump’ from default fonts to the Typekit load when on a slower connection. Even reducing the size of my kit to the bare minimum doesn’t help much. But this same issue exists with cufon, too, so it’s not a deal breaker.

  2. says

    I know what you mean about a special place for google fonts (and Oswald!), but I do have to agree that there is something quite special about Typekit as well.

    I still haven’t launched a website or blog using any of the typekit fonts, but a few weeks ago I opened an account and started the search for a few new fonts for my new website (still in the making!). When I saw the font named “Dax”, I knew that there was a place for me there as well ;)

    I’ll still use google fonts for all of my client projects, but for my own I will probably introduce some typekit fonts.

    • says

      Sounds like we’re on the same page Heather. It’ll be hard for me to justify using something other than Typekit for sites like mine or StudioPress. They are just such elegant fonts, even though I do like a lot of stuff that Google has.

      Either way, they are all much better than Arial, Verdana and what not. ;-)

  3. says

    I agree with you. Currently, Google fonts doesn’t compare to typekit. think of a font and its there in typekit.
    However, the no. of fonts have increased drastically in Google fonts and you never know that what “Google Might plan next” in order to make it equivalent to the competitors. If you can find free fonts which are as good as premium one, then why would you opt for the later.

  4. says

    I agree with you that Typekit is a great solution for those times when you absolutely need to have a great font.

    But I’m more technically-minded than design-minded, so I have one major beef with Typekit (as well as Google fonts): these things can be heavy! Looking at your site as it stands, using Typekit requires 3 HTTP requests for a total of 202.1 KB — on every page.

    To put that in perspective, your entire homepage is 835 KB, meaning that the font alone is responsible for about 25% of your total page load. On this particular article page, the font is responsible for 40% of the page load.

    To make things a bit worse from a performance point of view, the requests don’t seem to cache — that’s a lot of extra bandwidth!

    Maybe I’m just old school. I know a lot of people don’t really too much about these types of things these days. I just wanted to point out a downside of relying too much on web fonts.

    I get that sometimes a great font is worth a minor hit to user experience, but other times it isn’t. Just food for thought.

    • says

      Great food for though, Kevin and thanks for sharing it. Fortunately for me my site is hosted with Synthesis, so we have the advantage of optimizing for performance.

      I think most things in life are tradeoffs… fonts and web performance being no different. Cars, houses, etc – we all want to them to look a certain way, and sometimes there’s a cost attached.

        • says

          Definitely something to look into. I’m checking with our web guys at Synthesis to see if there’s any *real* issue with performance on our stack, and if there is what we can do to alleviate it.

      • says

        The requests go directly to Typekit, so it wouldn’t impact your servers any. But I agree it’s not an issue for a site like yours (or most blogs). It does start to add up though when you’re talking about a site with a lot of ads and other external requests.

          • says

            Hmn. Would love to see your post on tons of ads (oh, the dead weight!). I’m trying to roust several of my mommy blogger clients to start paid sponsorship programs on their blogs, but the sparkle of affiliate network advertising is still in their eyes. Everything seems to be going more corporate, and I think a return (in those circles) to more organic advertising would be a refreshing (if not retro) change. Not to mention better page load times. But wait…you were talking about fonts, weren’t you? :)

    • says

      As far as there being a jump, it really depends on the caching of the fonts. It doesn’t matter what font replacement system you use if you don’t cache the fonts you will get a slight delay in font loading.

        • says

          It actually has more to do with how a browser renders the CSS–that FOUT article above explains the phenomenon in more detail. You really should only see the FOUT in Firefox, since it displays a fallback font until the stylesheet loads completely…the rest don’t.

    • says

      I’ve found some of the font files really heavy and slow-loading too. One I use is 200K for one font with no variations, and that just seems too much when there are so many using mobile browsers. Is hosting your own using @font-face better? That’s what I used to use, but I haven’t done a comparison yet. Also is it worse for a site on a shared server? Thanks!

  5. says

    Thanks, Brian! I have used TypeKit some and am now going to check out Google Fonts. Nice explanation of them both. And, honestly, how exciting that we are able to expand beyond standard fonts/images/flash.

    Kevin brings up a good point. The heaviness of it is just using it right, now how much you use it on the site?

  6. Daren says

    So this answers my question! Just yesterday I was on your site and liked the font. (love the easy reading and simplistic organization btw) So I fired up Chrome and looked at the CSS. Then over to Google web fonts. Not to be found. I will have to take a look at TypeKit. Although the price of free for Google fonts will win out for me right now. But that could change in the future.

    • says

      Thanks for the comment Daren. :-)

      If you want something similar to Proxima Nova, you can try Open Sans out from Google. It’s another clean font, that’s easy to read.

  7. says

    As you know, I was an advocate for Typekit as far back as the first theme I ever made for StudioPress (more than two years ago…time flies, right?) I’m a typophile from way back, so it was a dream come true to use well-crafted typography on a website without having to make 3,000 PNGs. Plus, Jeff Veen, who taught me how to code tables and frames in his Webmonkey back in the mid-90′s is one of the brains behind it, and as a dedicated fan-girl I was required to try it pretty much the second the site was launched : )

    With Google fonts, the font choice process is usually “Does this font look like crap in Chrome? How bout this one? This one?” Yopu had to make sure they were hinted for screen use and didn’t look chunky, or the kerning pairs weren’t wonky…things you just rarely have to worry about with Typekit fonts.

    Like you said, though, I’m actually in the process of going through those old themes and replacing the Typekit yumminess with Google easiness and free-ness. Google are the smart choice for commercial themes, Typekit for custom.

  8. says

    Interesting timing on your article as I just ran my own experiment with this over the weekend.

    I had been using Typekit with Dagny Web Pro for headings and Gothic Web Pro for other text. I loved the look, but wanted to see if I could cut down on load times by switching to Google fonts. Typekit was about 115K.

    I loaded every possible Google font I could to try mimicking what I had with Typekit. Open Sans looked nice enough for body & headings, but something was missing.

    I don’t know what it is, but there are subtle, refined touches to Typekit fonts. I couldn’t stay with Google because I missed the professional look of Typekit too much. I decided that 115k was well worth the tradeoff.

    To make things even better, I switched to Synthesis yesterday. Now those Typekit resources are really insignificant to overall speed! I ran a test on Pingdom and page load time dropped from 3.5 seconds on shared hosting to 1.5 seconds with Synthesis. I couldn’t believe it! And that’s with Facebook javascript using more resources than I’d like too.

    Now I just need to write more articles and get the site launched.

    Thanks for all your great insight Brian.

    • says

      Awesome to hear your insight on Google Fonts vs. Typekit, but more awesome is to hear about the performance tests you ran with Synthesis!

      I get that folks who are on shared hosting experience a more noticeable hit, which is even more reason to move to a specialized hosting stack.

  9. says

    You had me at “FONT”….total font addict here. I love Google fonts, easy and free. I haven’t played with Typekit since Adobe acquired them…I must check it out again. Lately I’ve been purchasing fonts to use in the design elements like the headers and combining with Google fonts for post titles and content. Seems like a happy marriage, most of the time…until a browser decides to try to pick a fight once in a while.

    • says

      In my opinion Typekit became awesome after Adobe acquired it. My experience so far has been so ridiculously easy and pleasant, that I have nothing but good things to say.

      Kinda the same way I feel about Apple.

  10. says

    I just signed up for the Adobe Creative Cloud plan yesterday (whee!) which, for me – as an educator – is only $30/month for the whole gigundo suite. Really a great deal, even without the educator discount, in my opinion, and part of it is the fact that it includes Typekit.

    I’ve been using Google Fonts more of late, and it’s so hard to NOT use Oswald because I am similarly obsessed with it, but I do branch out from time to time. As a novice when it comes to typography I find that I sometimes don’t realize a particular font is going to have display issues until certain letter combinations come up and I think, “oh, that looks bad.”

    I’d love to know how you and other designers approach this when doing client work; do you assume you’ll have a Typekit subscription in perpetuity, or do you set up clients with their own Typekit accounts so that they’ll be the ones responsible for renewing the license each year for the fonts on their sites?

  11. says

    Brian,
    I too share your Oswald obsession, I cant imagine web without it… I do agree with you that Typekit is awesome, but I personally love the free-to-use structure of the Google Web Fonts.

    I kind of share the same view as you, however; As a theme developer, you can’t use paid fonts, it makes it harder for users to configure (and more expensive), and can really frustrate them. On custom projects requiring that magic design touch, fonts really push people over the edge though.

    I have admittedly used Proxima Nova on a few sites :)

    • says

      To be honest, I’ve actually started getting tire of Oswald. While I do like it, I couldn’t use it on more sites that it was used on.

      Enter Typekit, which means now I’ve got a MAJOR font crush on Proxima Nova.

  12. says

    I love TypeKit and use it occasionally for client sites (and at one point was using it on my own).

    However for themes that are destined for mass distribution Google Fonts is still the only option. Also, on sites that really rack up the page views, TypeKit can get pricey.

  13. says

    Was using Typekit for a long time, then I saw how my sites looked on a Windows computer…. I was in my third year of Typekit… Shock. Horror. No typekit renewal for me. IE8. I’m not saying I cater to IE visitors, but I’m not going to serve up a horror show of ugliness to X% of my readership, either.

    Yes it may be a Windows problem, but they’re awful. I asked how they could not let people know what to expect, and they said yeah, it’s just not the same on Windows.

    We WPers need to be diligent about living in the Mac bubble…. I’ve seen some cynical posts around the net about it being a Mac centric developer group, and I don’t know if that’s true or not true, but it never occurred to me how awful my site could look on Windows, I had no idea that Apple was THAT good, you know?

    • says

      I’m a designer who uses a PC–you couldn’t make me use a Mac if you gave me one :D How long ago did you use Typekit? Were you using fonts that were hinted for screen display? Another trick for making fonts look better using any type of @font-face technology, I;’ve found, is to experiment with setting it at odd vs. even pixels. I’ve had type look horrible at 16px look just fine at 17px. I just double-checked Family Tree and Bee Crafty (both themes use Typekit to serve fonts) in IE8 and IE7, and they look just fine! Not as pretty as in Safari, but definitely not a horror show.

      • Rob Reale says

        If that’s true, someone should tell typekit because they didn’t know. I’m excited to go check this out now, thank you so much for the info, Chris!!

          • says

            @Chris – It’s GDI ClearType that is the big offender with font rendering. DirectWrite ClearType is so much friendlier. Compare some webfonts rendered on Firefox or Internet Explorer 9 on Windows 7 against the same webfonts on the old XP.

          • says

            Honestly, Chrome (which is the browser I use) has probably the cruddiest display. I keep trying to switch to Safari for the pretty, pretty fonts, but I love my Chrome Inspector faaaar too much :D

  14. says

    I felt like I wanted to throw my 2 cents in regarding Goole Fonts. I have not personally use Typekit yet but am definitely interested to see what it can offer. I feel Google fonts is so stupidly easy to use it has to be the first choice. It is the simplest piece of script and CSS for over 500 free to use fonts. Typekit is definitely something I will be looking at and trying.

    • says

      I agree with you Adam, that Google Fonts are extremely easy to implement. I thought Typekit’s process was much harder than it turned out to be, and was pleasantly surprised when I found out it wasn’t. The bottom line for me is that there are some fonts I’ve seen on various sites that I just loved, and they all turned out to be Typekit.

  15. says

    Enjoyed the article and equally enjoyed the comments. It’s allways very interesting to hear from the people who use webfonts in the real world, on the frontline. And good to know Oswald has a fan club ;) Thanks for using it. I can promise improvements are coming.
    A few comments;
    It’s an interesting situation that theme developers have a clear need for free & easy fonts, and often prefer to use them over commercial fonts. This has been one of my big interests in designing free webfonts – i reckon the web needs free fonts for web development & developers to prosper. Commercial solutions, can offer some better ‘quality’, but opensourcing can make font design respond much quicker to trends, feedback, needs, and generally be more ambitious, and less protective, and less ‘precious’.
    Quality – the quality of free fonts is improving all the time. Free font designers may not have the resources of commercial corps like Adobe or Font Bureau, but we can make up that gap, and are doing so. The next couple of years will be interesting.
    Hinting – font hinting has always been voodoo & a pain (cos it’s a skill & takes work). It still is a pain, as a chunky % of web users are still on WinXP and lower. But, not all commercial fonts have good hinting (if you ever looked at some of them on WinXP) and not all free fonts have bad hinting. A free autohinting tool like ttfautohint is also making the gap between $$$good-hinting$$$ and free-hinting smaller and smaller. Check out http://code.newtypography.co.uk/?page_id=2548 for proof.
    All feedback welcome btw. Also, please tell me what sort of faces are missing from your free-font toolkit :)

  16. says

    Well! Brian I am using google fonts and those are really good fonts but I never used typekit fonts but I am considering them to use in my future websites projects when I get the extra budget to purchase these fonts. ;-)

  17. says

    I haven’t use typekit yet but you already make it sounds so wonderful that I feel like I’m ready to dump Google Fonts. Another great article Brian. Keep it coming.

  18. says

    I use both TypeKit and Google Fonts, and have found some big differences in the two. Firstly, there is the already discussed load time. TypeKit can make a visual difference in load time, one thing i’ve had to remind a couple other of is to make sure TypeKit stays in the header, and doesn’t get pushed to the footer like most javascript calls. This helps prevent the bump when loading the kit. Also, TypeKit fonts have a better rendering of size in comparison to their fallback fonts. Whereas many Google Fonts do not. For instance, if my TypeKit fails, or someone has it disabled, the loaded Arial, or Helevetica is very close to the same size. 12px renders as 12px whether it’s a web safe font or TypeKit, or very very close. Whereas my Google Font may need to be sized at 20px just to make it readable, but if it fails or Javascript is disabled, the resulting Arial or Helvetica is way too large. Minor annoyance.

    • says

      Like most things in life there are trade offs. Since I’m on Synthesis hosting, I don’t have to worry as much about the performance as much as the person who’s on shared hosting. But in my opinion, being on shared hosting is a whole other story. ;-)

  19. says

    The thing I dislike about Typekit, is that the last time I attempted to use it, the only option seemed to be to add some weird javascript to your site to add the fonts. That seems kinda silly when you can just as easily use good old CSS for it.

    Fontsquirrel.com also deserves a mention as a replacement for either of them. The font kit generator on their site is awesomely handy sometimes. Just gotta make sure you have the legal right to use the font first.

    • says

      The reason for that is to ensure that the encrypted fonts can be served–the fonts you subscribe to come from a variety of commercial type foundries. Just linking to them isn’t an option, because Typekit needs to ensure the copyrighted fonts don’t get pirated.

  20. says

    I enjoyed reading your article Brian but found it interesting that you made no mention of Monotype and fonts.com given your love affair with typography. While I agree that Typekit does offer a good user interface and experience as a web font service, the breadth and depth of their fonts are somewhat limited as some have pointed out in the comments.

    I’d like to invite you and everyone who reads the article to try out the typefaces on fonts.com where you can find the classics like Helvetica, Frutiger, Avenir, Univers to fresh new designs like Akko and Biome. There is also an extension plug-in for Adobe Photoshop that enables you to try out web fonts directly within Photoshop during your design process for free (http://www.fonts.com/web-fonts/extension).

    Given your focus and love of typography, I think you’ll be missing out on a lot without mentioning and exploring fonts.com.

  21. Mike says

    A little late to the party, but I had to throw in my two cents:

    I’ve used a few Google Fonts and find them frustratingly inconsistent in how they display.

    Example: I’m working now with a nice font called Signika on a site. It actually changes appearance based on font-size (as Chris Ford mentions above) but also based on the color of the font! It’s wild actually. I can use Developer tools and slide the font color-picker around and suddenly the letters become more bold and jagged, as if it the aliasing goes to “crisp” or “none”. Put it to another color and it pops back to normal.

    What’s particularly odd is that this occurs in Google Chrome, but not IE or Firefox. I’d think it be the other way around.

    If Typekit fonts all avoid this issue, I’d certainly be interested in moving over.

    • says

      Heh, better watch out. You’ll become a font addict like some of the rest of us. And yes, I’m hoping to knock out round 2 very soon for you. Just been very chaotic this summer for us, rather unexpectedly. Once we get everything done, you can bat your eyes and have me switch fonts after you pick out a few you like. ;-)

  22. says

    I’m not a font addict but I do appreciate good fonts and font combinations.

    Pretty happy with the fonts currently used on Genesis themes but interesting to listen to you Font Addicts confessing your illicit love affairs.

  23. says

    I’m definitely a font addict as well and I ABSOLUTELY ADORE TypeKit.. I too was enamored by the website and grand selection of fonts. Their (TypeKit’s) font plans scared me at first (because FREE is a lot different than $24/49/99) but upon first exhausting other options (including creating my own self-hosted @fontface kits)…I soon conquered my fears and acquired the portfolio plan! Magnifique! I can’t be happier with the ease of use and font style/weight implementation into my CSS on new and existing sites! Google fonts is cool but I also see a noticeable difference in font clarity/aliasing when using TypeKit over Google fonts.

  24. says

    Hi Brian and all,
    I know this is a bit off topic. I need a help with Style.css file for Mocha theme.
    I changed Droid Serif for Header for each post as per my friend’s request from Droid Serif to Dancing Cursive font. It works fine for each single post. Now, under the BLOG link (Blog list) it still shows Droid Serif and not Dancing Cursive font. I am new to CSS codes and I can’t figure out where in Style.css to change it. Please help me.
    Here is the website: with Dancing Cursive font: http://rowanmalloy.com/useful-fiction-writing-techniques/ and if you click on BLOG link, the same article will have Droid Serif font…

  25. says

    The thing that most intrigues me, is in all these comments there is only one mention of mobile portability of fonts?
    I mean, is there any info anybody knows of where it can be verified which fonts will work on which phones, pads
    etc? I mean even with all the font support on desktop browsers, the situation now of Desktop vs. mobile is very
    like the early web with early browsers vs later, where I can see people designing sites for desktop which default
    to horrible looking alternatives on mobile?
    Could this be? Are there any stats on this area?
    Thanks so much.
    Dan
    Houston

    • says

      Daniel, excellent point you bring up, the problem is I have never seen a font render badly on a mobile device. But I’d like to know if they’re out there so I can avoid them. Have you actually had that experience? I think the 2 main mobile browsers are Chrome and Safari, and they’ll typically render OK. If someone uses an alternate browser and has lousy font or page rendering, their experience would hopefully not be unique to one website, they should be able to figure out pretty quickly it’s not just a bad site they’re encountering.

  26. says

    I’m late to the party for this thread, but I’ve enjoyed reading all of the comments. With that in mind, I can think of a couple of reasons why I believe I’m going to switch from Google Fonts to Typekit.

    1: I don’t think the price is out of line for the quality of fonts that Typekit provides.
    2: I don’t trust Google to maintain any of the free services it provides, other than search.

    Google is killing Reader, it’s Affiliate network and other free services. There’s nothing to make me believe that Google Fonts aren’t a whim away from disappearing, too. I’d rather pay for something that I expect to be around as a business than rely upon a free service that could vanish without regard to my needs.

    • says

      Spot on, William – in particular this weird thing they did with removing Google Sync from free Google Apps accounts has been a real smack in the face and wreaking havoc on people left right & sideways.

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>