Typekit = not open source fonts, so theoretically higher quality foundry fonts. Also, they use a font loader which solves some issues with like FOUT in Firefox.
I use Google Fonts due to the freeness, but if I were to be building a big, very professional site, I'd probably go with Typekit. One thing that I've admired about it is the variety of filters they have, especially their properties. If you're a bit of a typography geek, that's a very nice addition.
typekit has alot of downtime, and if you complain, they say you didn't meet their terms of agreements and force you into higher plans. Avoid typekit at all costs!
I've used both numerous times and have to say that I favor Google Fonts. It's just so much easier to use and implement, plus you can actually download the fonts for use in the design/mockup phase which is HUGE. With TypeKit you can only add a font to a domain and so I find myself having to work on typography during site development. This is a problem when I'm trying to send an accurate-as-possible comp to a client for approval. I might actually end up cancelling my TypeKit subscription for this reason as I find myself turning to Google Fonts so much more often.
A lot of people were just notified about the possibility of using Google web fonts with Photoshop, which I'm assuming you're one of them. Let me remind you that since Adobe has acquired Typekit it will likely be a future possibility but on all products. Personally, I haven't had 1 issue and I favor Typekit as I strongly dislike Google's library. However, I wouldn't limit myself to just either and if possible I'll use the old @font-face as well. But I tend to like higher quality which Typekit delivers.
@ChristopherBurton"A lot of people were just notified about the possibility of using Google web fonts with Photoshop, which I'm assuming you're one of them." - Not sure what you meant by this, I've been downloading and using Google Fonts in the design process for a while now.
If and when Adobe adds this capability to Typekit it'll greatly change my position, but for now it's a big drawback in my opinion.
@Johnnyb I made sure I said "I'm assuming". There was a lot of chatter recently about the possibility of using Google web fonts with Photoshop via a plugin. I actually found out not too long ago but like I said above, I'm not really a fan of their library. I also don't blame you as it seems it's something you value a need for.
This thread motivated me to try Google Web Fonts, something I've not done before.
I figured I was in for a long trial-and-error process, but within 20 minutes I had it working on a test page I've been playing around with for some transition effects, and most of that time was spent browsing through the many fonts available. Incredibly easy to use! I'm sure I'll be using it often.
Haven't tried TypeKit, so I can't comment on that.
I've been using Google fonts in PS for over a year. I haven't have the need for any fonts in many months. I went back a couple months ago and noticed they vastly increased their library and it is still continuing to grow...
Since we are on the subject though...
When you guys use them, do you externally link them, @import, embed the fonts, or ??
I have always used the @import method, but after recently reading an article on page loading times, it mentioned that the @import (in general, not specific to Google fonts) method drastically decreases page load speed. Any thoughts?
@RaviDesai At the same time, most people can't tell the difference between a good typeface from a bad one. And within the Google web font library, there are few that actually render well on screen. Google pays a very low amount to the Type Designer's that submit to their library so perhaps that is why we're seeing low standards. And as Matthew Butterick said, "Google Web Fonts aren't really open source".
Typekit on the other hand at least cares about their product quality over product quantity. They make sure the fonts are hinted and render properly. Whether it be from the foundry or by doing it themselves. Typekit isn't perfect either but at least they're trying.
I'll be writing an article in a few months with another advocate for type designers and I'll drop a link in this thread when it's out.
In all fairness, Typekit selection is vastly superior. Some of the best fonts ever designed are on Typekit: FF Scala, FF Absara, FF Meta, Adobe Minion, Futura, Gill Sans, and other masterful creations. You just don't get this plateau of quality with Google fonts.
Having said that, I would not subscribe to Typekit. They merely provide a service, i. e., you don't get to keep the fonts. I'd rather pay a bit more upfront but get them fonts for life.
Slightly OT, I'm unsure about the technicalities so I'd like some clearing up:
Do Typekit and Google Fonts resort to the same font loading method?
Are there drawbacks to setting up a subfolder with your fonts of choice and referring to it via the @font-face declaration vs scripting and other methods?
I have used Google Fonts in the past, but now use TypeKit as you get their best package included in Adobe Creative Cloud.
TypeKit's selection is infinately better, but for a 100% free service, Google is really good and does have a few gems.
Another advantage with both is a high quality set of scripts to get them working. @import still isn't totally relaible, so to have methods developed and tested by the likes of Adobe and Google is a plus point.
Having said that, I would not subscribe to Typekit. They merely provide a service, i. e., you don't get to keep the fonts. I'd rather pay a bit more upfront but get them fonts for life.
Unfortunately that's not possible. Adobe explicitly forbids embedding .ttf/.otf files of Adobe fonts directly into a webpage in their EULA. That's kind of the whole point of Typekit (and WebINK etc): to use Adobe fonts on the web.
While you've bumped this topic anyway, I'm using Ubuntu form Google Web Fonts. Typekit also has Ubuntu. Does that make Ubuntu one of the 'few gems' Google Web Fonts has? :P
There are lots of fonts on Google Web Fonts that don't render nicely but there can be found pretty good fonts... And as it's free, easy to use and good on performance it's pretty cool and must for all web designers. Typekit has more quality fonts and if you do some serious work and can't find anything that match your needs on Google Web Fonts go for it. So both is my opinion. And those that lacks Typekit in Photoshop my advice is that you definitely have to design typography in browsers.
If it's for free on Google and its on Typekit as well, is Typekit better because it's paid? :P If you got good arguments I'm happy to listen but I just don't think that because it's free it makes it bad, a lot of great stuff is free!
If you do some simple research you will find that Typekit actually works hard for their customers. That includes manually optimizing their library. Something Google does not do. And there are paid products that are better than their free competitors.
I'm actually going to use font squirl. And use its webfont kit. That seems like the easiest way to host it on my own servers. I prefer to host my own junk. I don't buy into the google hosting fanominon.
Typekit and Google both use the same font loading technology. I'm on my iPhone at the moment but I'm sure someone can help you with finding it.
If the webfont is in Font Squirrel's library, go for it.
Also, if you want to host the webfonts on your own server, there are a few distributors who allow you to do this. Of course it won't be free which I find a good thing. We should support type designers just as much as we support developers or web designers.
I can understand if some have very little income to support paying for fonts/webfonts but to advocate a distributor who refuse to filter the quality that comes in, well, I just wish they educated themselves on this subject, whether they agree or disagree. It's important not only so they can educate others but to improve the quality of their work as well. Remember that text makes up the majority of the web.
I started using Google Fonts and liked a lot so far, the freeness does help. However, Typekit's library looks very appealing too. I'm starting to consider making the switch, even if I had to pay a little bit more.
I'm curious about the quality of each one. For example, If I'm using Ubuntu through Typekit, will it be significantly different (better) than if I'm using it through Google Fonts?
I've realized that font rendering quality varies a lot depending on the OS and the browser. It would be very nice if Typekit could help in this issue.
There are really well designed and optimized fonts in Google's library (Droid Sans, Droid Serif, Open Sans, Arimo, etc). But many seem to be autohinted or poorly manually hinted.
This is somewhat related so let me quote Pablo Impallari regarding Google's library and webfonts in general:
"Some are Print-fonts converted for web use, and some are specifically tailored for the web, such as: Open Sans, Source Sans, Merriweather, Domine, Libre Baskerville and a few more. "
"There are a few notable exceptions, where web-fonts were specially designed/tailored for the web and have key differences compared to their print-version (bigger x-height, wider, open counters, loose spacing, less contrast, etc...) such as the Webtype RE series, H&FJ smart screen fonts, Typoteque Screen fonts, and some other smaller foundries such as Monokrom and Letters From Sweden. There may be others that I'm missing now, but so far very few."
Typekit's library has flaws too, though. From what I understand, they do review each typeface that is offered and make adjustments if need be (but not always when needed). I think it depends on their agreement with the foundry as some optimize their own webfonts. Above @chriscoyier mentions that Typekit doesn't offer open-source fonts which he may not have been aware of but they do, even libre fonts.
I can personally vouch for Webtype's RE webfonts. They render incredibly well even at extremely small sizes (9px).
I'm curious about the quality of each one. For example, If I'm using Ubuntu through Typekit, will it be significantly different (better) than if I'm using it through Google Fonts?
It depends because Typekit will sometimes optimize fonts in their library. Ubuntu is open source so basically anyone is allowed to make adjustments, which it seems they have done here compared to what is in Google's library.
I've realized that font rendering quality varies a lot depending on the OS and the browser. It would be very nice if Typekit could help in this issue.
They offer screenshots of how the webfont will render in each browser and platform (including on the Ubuntu OS).
I don't know if you meant me when in an earlier post but I never tried to advocate the use of Google Webfonts, just wanted a solid reason to prefer paid font suppliers over free ones for using the same font... which brings me to:
Ubuntu is a libre font so basically anyone is allowed to make adjustments, which it seems they have done here compared to what is in Google's library.
I have Typekit as part of my Adobe Creative Cloud subscription, but I still use Google Web Fonts because I may not always want to keep my Adobe subscription and then what happens to all the fonts on all the sites I've created? They get kicked back to the fallback font I presume, but I'd rather know that the fonts will be there even if I decide I never want to pay for anything again...
Thanks Chris, I quickly read that link you gave about font licenses but it's only half the answer I was looking for. I meant did they (Typekit, maybe others too) make improvements to the Ubuntu font? You said it seems they did that, if that's true and I can see the difference I might switch.
@CrocoDillon After further testing, I'm seeing the same rendering at multiple font sizes. So it appears they did not make any adjustments as I initially thought. Therefore, using Typekit or GWFs will not make any difference.
I have been looking at both TypeKit and Google Web Fonts API recently. I must say that I like the google one a lot more. And it even seems to be free.
I would be glad if some of you could shed some light upon this - give a few pros and cons for each service.
The only thing I like more about typekit is the size of their font archive. :-)
www.webink.com
It's a really clean method of integrating web fonts using @font-face.
If you want a lot of fonts and flexibility, use typekit
If and when Adobe adds this capability to Typekit it'll greatly change my position, but for now it's a big drawback in my opinion.
This thread motivated me to try Google Web Fonts, something I've not done before.
I figured I was in for a long trial-and-error process, but within 20 minutes I had it working on a test page I've been playing around with for some transition effects, and most of that time was spent browsing through the many fonts available. Incredibly easy to use! I'm sure I'll be using it often.
Haven't tried TypeKit, so I can't comment on that.
Since we are on the subject though...
When you guys use them, do you externally link them, @import, embed the fonts, or ??
I have always used the @import method, but after recently reading an article on page loading times, it mentioned that the @import (in general, not specific to Google fonts) method drastically decreases page load speed. Any thoughts?
Typekit on the other hand at least cares about their product quality over product quantity. They make sure the fonts are hinted and render properly. Whether it be from the foundry or by doing it themselves. Typekit isn't perfect either but at least they're trying.
I'll be writing an article in a few months with another advocate for type designers and I'll drop a link in this thread when it's out.
I like google webfonts because its FREE ;-)
Google Web Fonts are great, I use them all the time.
You just don't want to go crazy adding to many of them on a site, or you will increase your load times.
In all fairness, Typekit selection is vastly superior. Some of the best fonts ever designed are on Typekit: FF Scala, FF Absara, FF Meta, Adobe Minion, Futura, Gill Sans, and other masterful creations. You just don't get this plateau of quality with Google fonts.
Having said that, I would not subscribe to Typekit. They merely provide a service, i. e., you don't get to keep the fonts. I'd rather pay a bit more upfront but get them fonts for life.
Slightly OT, I'm unsure about the technicalities so I'd like some clearing up:
I have used Google Fonts in the past, but now use TypeKit as you get their best package included in Adobe Creative Cloud.
TypeKit's selection is infinately better, but for a 100% free service, Google is really good and does have a few gems.
Another advantage with both is a high quality set of scripts to get them working. @import still isn't totally relaible, so to have methods developed and tested by the likes of Adobe and Google is a plus point.
@alanshortis ,
What are the differences/advantages/disadvantages of using @import vs. @font-face?
Typekit uses encrypted @font-face which you can see within web inspector. Typekit and GWF use the same loading technology.
Are you guys talking about using @import to import another stylesheet such as typography.css?
@PLNR
Unfortunately that's not possible. Adobe explicitly forbids embedding .ttf/.otf files of Adobe fonts directly into a webpage in their EULA. That's kind of the whole point of Typekit (and WebINK etc): to use Adobe fonts on the web.
While you've bumped this topic anyway, I'm using Ubuntu form Google Web Fonts. Typekit also has Ubuntu. Does that make Ubuntu one of the 'few gems' Google Web Fonts has? :P
Using google you can host them on your site and call them via @font-face correct???
There are lots of fonts on Google Web Fonts that don't render nicely but there can be found pretty good fonts... And as it's free, easy to use and good on performance it's pretty cool and must for all web designers. Typekit has more quality fonts and if you do some serious work and can't find anything that match your needs on Google Web Fonts go for it. So both is my opinion. And those that lacks Typekit in Photoshop my advice is that you definitely have to design typography in browsers.
Can anyone recommend a free developer to build my site? I don't think it will take that long, perhaps a month?
If it's for free on Google and its on Typekit as well, is Typekit better because it's paid? :P If you got good arguments I'm happy to listen but I just don't think that because it's free it makes it bad, a lot of great stuff is free!
Breathing FTW. ;)
If you do some simple research you will find that Typekit actually works hard for their customers. That includes manually optimizing their library. Something Google does not do. And there are paid products that are better than their free competitors.
Using google you can host them on your site and call them via @font-face correct???
Never mind I think. I believe this is how https://developers.google.com/webfonts/docs/getting_started
Or this? http://code.google.com/p/googlefontdirectory/
I'm actually going to use font squirl. And use its webfont kit. That seems like the easiest way to host it on my own servers. I prefer to host my own junk. I don't buy into the google hosting fanominon.
Typekit and Google both use the same font loading technology. I'm on my iPhone at the moment but I'm sure someone can help you with finding it.
If the webfont is in Font Squirrel's library, go for it.
Also, if you want to host the webfonts on your own server, there are a few distributors who allow you to do this. Of course it won't be free which I find a good thing. We should support type designers just as much as we support developers or web designers.
"We should support type designers just as much as we support developers or web designers."
Well said Chris. This aversion to paying for fonts is really baffling, especially when it's coming from other designers.
I can understand if some have very little income to support paying for fonts/webfonts but to advocate a distributor who refuse to filter the quality that comes in, well, I just wish they educated themselves on this subject, whether they agree or disagree. It's important not only so they can educate others but to improve the quality of their work as well. Remember that text makes up the majority of the web.
Anyway, thanks for being a supporter @dfogge.
I started using Google Fonts and liked a lot so far, the freeness does help. However, Typekit's library looks very appealing too. I'm starting to consider making the switch, even if I had to pay a little bit more.
I'm curious about the quality of each one. For example, If I'm using Ubuntu through Typekit, will it be significantly different (better) than if I'm using it through Google Fonts?
I've realized that font rendering quality varies a lot depending on the OS and the browser. It would be very nice if Typekit could help in this issue.
There are really well designed and optimized fonts in Google's library (Droid Sans, Droid Serif, Open Sans, Arimo, etc). But many seem to be autohinted or poorly manually hinted.
This is somewhat related so let me quote Pablo Impallari regarding Google's library and webfonts in general:
"Some are Print-fonts converted for web use, and some are specifically tailored for the web, such as: Open Sans, Source Sans, Merriweather, Domine, Libre Baskerville and a few more. "
"There are a few notable exceptions, where web-fonts were specially designed/tailored for the web and have key differences compared to their print-version (bigger x-height, wider, open counters, loose spacing, less contrast, etc...) such as the Webtype RE series, H&FJ smart screen fonts, Typoteque Screen fonts, and some other smaller foundries such as Monokrom and Letters From Sweden. There may be others that I'm missing now, but so far very few."
Typekit's library has flaws too, though. From what I understand, they do review each typeface that is offered and make adjustments if need be (but not always when needed). I think it depends on their agreement with the foundry as some optimize their own webfonts. Above @chriscoyier mentions that Typekit doesn't offer open-source fonts which he may not have been aware of but they do, even libre fonts.
I can personally vouch for Webtype's RE webfonts. They render incredibly well even at extremely small sizes (9px).
It depends because Typekit will sometimes optimize fonts in their library. Ubuntu is open source so basically anyone is allowed to make adjustments, which it seems they have done here compared to what is in Google's library.
They offer screenshots of how the webfont will render in each browser and platform (including on the Ubuntu OS).
I don't know if you meant me when in an earlier post but I never tried to advocate the use of Google Webfonts, just wanted a solid reason to prefer paid font suppliers over free ones for using the same font... which brings me to:
You have my attention, please elaborate :)
Oops, I made a mistake. I meant Ubuntu (typeface) is open source which allows modification. A libre font just means it's free.
Will elaborate later after I get some much needed rest.
I have Typekit as part of my Adobe Creative Cloud subscription, but I still use Google Web Fonts because I may not always want to keep my Adobe subscription and then what happens to all the fonts on all the sites I've created? They get kicked back to the fallback font I presume, but I'd rather know that the fonts will be there even if I decide I never want to pay for anything again...
@CrocoDillon I was speaking to the person just above me. Sorry if there was confusion there.
Libre fonts are free but usually come with a restrictive license of some sort.
Open source fonts allow modification and redistribution (such as Ubuntu). But to better explain it, take a look here.
Thanks Chris, I quickly read that link you gave about font licenses but it's only half the answer I was looking for. I meant did they (Typekit, maybe others too) make improvements to the Ubuntu font? You said it seems they did that, if that's true and I can see the difference I might switch.
@CrocoDillon After further testing, I'm seeing the same rendering at multiple font sizes. So it appears they did not make any adjustments as I initially thought. Therefore, using Typekit or GWFs will not make any difference.
Thanks for testing @chrisburton :)