Why I’m not using Typekit Fonts yet
I tried installing Typekit fonts on this blog, and I almost gave up because the complexity of it reminded me of why I moved my blogs from WordPress.org to WordPress.com. I suppose it would have been easier if Typekit had built-in support for the Twenty Ten theme, but when I tried it a couple of weeks ago, they didn’t. So I had to open one of my blog pages in Safari, select Develop from the menu (because I installed the optional developer tools), select Show Web Inspector, and study the CSS to suss out what the “selectors” were for the masthead and other sections of the pages I wanted to set the new fonts to. Even knowing CSS, it took some searching through the code to see what was styling what, since Classes and IDs are arbitrarily created by each CSS author.
Once I found the Classes and IDs, I had to go back to the Typekit editor (which always took a long time to load, as did everything else on the Typekit site) and manually enter the “selectors” I wanted to apply the fonts to. I found that I had to do it with periods in front rather than hashmarks, or maybe it was the other way around— I would have to be writing CSS on a regular basis to get it right, and who does? (If you do, then you wouldn’t find it complicated at all, but then you might as well have a WordPress.org site and not a WordPress.com site, eh?)
Once I finally figured out how to style my blog text with the fonts — after reading many how-tos and forum postings and comments that negated original postings and follow-ups that clarified earlier answers — I didn’t like how the fonts looked. They looked grayish and jagged, not black and sharp. I took a screenshot, saved it in uncompressed TIFF format, and exported it to uncompressed PNG format to upload here.
Do you see how rough and jagged the text looks in the words “Just Singin’ & Signin’ in the Sun”? And how hard-to-read the thin, slanted text is in the words “A singer, sign language interpreter, and technophile talks about this & more”? I was very disappointed given how Raleway Thin looks on Typekit’s website.
Now, the really weird thing about this is that what Typekit shows on their website is not an image, but the actually text as it appears in your HTML5-enabled browser. And I swear the degradation you see in the screenshot I captured above is not due to JPEG compression— it is actually how it looked in my browser. Which begs the question: why would Typekit fonts look worse on a WordPress blog than on the Typekit website itself? After all, it is actual, selectable text characters you’re looking at, not bitmapped images.
Whatever the reason, the poor looks and lack of ease have turned me off for now. I will certainly give Typekit Fonts another try in the future because I think web fonts are a great thing. For now, though, my blog looks prettier without Typekit Fonts.
P.S. I tried thicker Typekit fonts, too, and they lacked blackness and smoothness as well.
Posted on July 13, 2010, in Writing for the Web and tagged CSS, font-face, fonts, review, typography, Web, Web fonts. Bookmark the permalink. 5 Comments.
Hi Daniel,
Which font are you using in this website and is it from Typekit? I would love to give it a try because it is almost perfect !
Thanks, K. It’s P22 FLLW Eaglefeather regular and bold for headings, P22 FLLW Eaglefeather Small Caps regular and bold for the first several letters of each post, and FF Dagny Web Pro regular, bold, italic, and bold italic for the body.
As for specifying font-weight, I think this is something that needs to be fixed in CSS. If a weight or style doesn’t exist, there should be no faux bold or faux italic. It should just default to the single style or closest style that exists. I’ve never seen a font come through a faux bold rendering looking great.
As for the free trial membership versus paid, it’s a pretty simple case of ‘you get what you pay for.’ Most free fonts are free for a reason. If I ever expand Raleway into a full family, I’m not sure that I can keep it free, just based on the amount of time it would take to do so. And I do think you should pay for fonts in general. It takes an incredibly amount of time to design one family. It would be pretty hard to be a great type designer, produce full families, and keep it a hobby.
I do believe that when typekit refers to fonts in their pricing, it does in fact mean typeface, so you wouldn’t have to use all 5 fonts on one typeface.
P.S. You don’t have to specify font-weight:100 for Raleway, since it’s just one style, normal will do just fine.
Matt,
Thanks for the comment and explanation. I hadn’t thought about the faux bold. Good point. It didn’t really look “bold” to me but then I forgot that the default style for a heading is bold, and I probably would have had to write
!important font-weight: normalin order to compensate for that. And I only know about that because of my experience with CSS, which leads me back to how I would like to see an easier solution that doesn’t requiring tinkering with CSS. I mean if I can forget it, then people who never learned it at all are really in trouble.By the way, I think your font is gorgeous; otherwise, I wouldn’t have picked it. I did try Fertigo Pro as well, and I didn’t like the way that looked either. I don’t know if that’s because the heading tried to make the regular into a faux bold or what. Which leads me to another point about Typekit and what you said about font weights and styles: if you get the free trial membership, you can only use two fonts in the “discrete” typographer’s sense, not the common parlance. It’s not like you get to use the regular, bold, italic, and bold italic of two fonts; you only get one regular, say, and one italic or whatever. So you have to be careful about which two fonts you pick.
So, to recap: love your gorgeous font, don’t love Typekit— yet. I would like the implementation to be much easier and not as demanding on CSS expertise. However, given what you brought to my attention (and I should know about fonts), I may think about trying the $24.99 per year membership. That way I could get five fonts for each of my two blogs — and I would need five “fonts” to comprise regular, bold, italic, bold italic, and maybe a small caps — and I might actually like the way my sites looked with those fonts. Perhaps I should also look at some blogs that have successfully implemented Typekit fonts with appealing results. Maybe you have one? I will have to check.
Daniel
P.S. You encouraged me to get the Personal membership for $25, and now that I look at the fonts available, I see that there actually are some like Brevia that have 12 styles, and it seems you can get them all and have them count as one “font” against your allotment of five. Hm! So one just needs to be very careful about choosing display or “decorative” fonts and make sure they are treated as “regular” and not bolded. Right? Or do you even have to specify that a font like yours (Raleway Thin) be “font-weight: 100″ or whatever? Curiouser and curiouser…
Your main problem is that you picked a font with only one weight and no italic, so the image you’re showing is using both faux bold and faux italic. Hopefully someday i’ll get a chance to design heavier weights an italic version of Raleway, but having your browser try to fake it is never going to look good.