Zoe Gillenwater writes about web design, especially Cascading Style Sheets. She’ll be speaking at John Allsopp’s Web Directions USA in Atlanta on Sept 21 in a presentation titled Efficient and Effective Design With CSS3.
A few months ago she announced a new book in the works called Stunning CSS3. I went to the book’s dedicated page to have a look.
Web fonts were being used. But in IE I didn’t like the way they looked at all:
Recreation of the page here.
The fonts used were Fertigo and Museo by Jos Buivenga.
Here’s what I did to fix:
1) I downloaded the fonts fresh. (They are available only in OTF format. Why? I don’t know. One would think that – as a promotional giveaway – making sure the fonts look good in every browser would be important. And at least one font designer – Peter Bilak at Typotheque – seems to grasp this reality. Good looking font rendering requires what it requires. And telling users of IE 6 through 8 to go take a hike is not a nice or smart thing to do. Bad for business.)
2) I subsetted the fonts (deleting unnecessary characters) to match the original files I got from Zoe’s site.
3) I converted the OTF files to TTF using the Font Squirrel Generator with auto-hinting enabled.
4) I re-did the TTF to EOT conversions using EOTFAST to get a compressed file. (Smaller files, quicker page load.)
Note: Auto-hinting is a hit-and-miss proposition – it works great for some fonts, not so well for others. But it worked very nicely for Museo and Fertigo, so I sent Zoe the improved fonts.
Here’s the result:
Recreation of the page here.
This was all one-click stuff that anybody can do. The worst that could happen is that the TTF wouldn’t look any better than what you had before. Was it worth the time spent? Absolutely.
Looks Bad Delivered By Typekit, Too
On Jos Buivenga’s site, I noticed that Typekit was listed as a source for Museo so I went and took a look there, too. Unfortunately, it looked as scraggly as the original on Zoe’s site:
Now, one of the arguments I’ve heard in favor of FHOS (Font Hosting and Obfuscation Services) is that they relieve web authors of the burden of taking different browsers into account. Well, what’s happening here? What’s up with this?
Don’t Deny What’s In Front Of Your Face
Recently, in a thread on Typophile, font designer Karsten “Cool Hand” Luecke wanted a piece of me for, according to him, putting ideas in people’s heads, for the notion that there are lots of fonts that look like crap onscreen. Fonts that need fixing. Fonts that could use improvement. It seems I’m an instigator for suggesting that web designers take matters into their own hands and mash, slash, and smack the font around until it looks right. Well, I plead guilty as charged. Please excuse me for suggesting that upholding some minimum level of aesthetic quality might be a good thing for users, web authors, and font designers alike.
Incidentally, Zoe G is using the web font Nadia from the free font service Kernest on her blog, and it looks very very good across the whole browser spectrum. (See if you can spot it.)
So here we have one case of free delivering better than paid, and a DIY derivative performing better than what could be purchased. (The single “normal” weight of Museo is free, the rest of the family you pay for.)
Make of this what you will.
{ 14 comments… read them below or add one }
My dear dear Mr Fink. You’re a master of misrepresentation. Subject-matter of my Typophile post is respecting EULAs, no more and no less. Not font quality. Fail. Speaking of font quality or rather, as is my point of view (and my little issue with Microsoft), font rasterizer quality, I only refer to my http://kltf.de/kltf_notes_raster.htm where I, more than explicitly, point out that there are rasterization issues which are far from negligible.
said Typophile post to which you refer I am which you suggest and nowhere say that all fonts are perfect. As to the
Thanks Rich for your help with the fonts. I agree that the small amount of effort to fix them is completely worth it, now that we have such easy to use conversion tools.
Hey, Karsten.
Aww, c’mon, I think you just don’t like the nickname!
I like it – you should too. Cool Hand Luke is a great movie – watch it and tell me don’t think the egg-eating contest scene is funny. Paul Newman at his best.
I’m glad we agree that there are “rasterization issues”, as you put it. And if so, what do EULAs have to do with that?
What exactly is it that I’m misrepresenting? You see, you don’t take issue with the substance of what I write, just the style, it seems.
If I’ve written anything that’s non-factual or just plain wrong, I’m happy to retract it and publish a correction as loudly as possible. But this you don’t do.
What’s really bothering you? Spit it out, please.
Regards,
Rich
“Please excuse me for suggesting that upholding some minimum level of aesthetic quality might be a good thing for users, web authors, and font designers alike.”
It’s disingenuous to suggest that upholding quality is the issue. What few of my colleagues will excuse you for is the presumption that fixing fonts is your job, rather than the job of the people who make the fonts. Nor are they likely to excuse you for actively alienating font makers from web authors at a time when these two groups of people need to find ways to work together, just as print designers and font makers have productively done so for the past couple of decades.
Yes, autohinting is an option although, as you acknowledge, it is a hit-and-miss option, and I note that you’re not showing how your ‘fixed’ fonts look in XP with ClearType rendering turned off. Maybe some font makers or web font services will adopt the autohinting approach to improve some of the fonts at some sizes on some systems, but seriously minded web font providers are going to need to invest heavily in manual hinting for their web font offerings, especially for text faces and especially for XP readers, and that’s a risky proposition in an untested market of speculative font licensing. So far, I’ve received one serious inquiry from a web font provider regarding hinting, which I take to be a good sign that maybe this nascent business might be viable enough to cover hinting costs. Might be.
@john hudson
>It’s disingenuous to suggest that upholding quality is the issue.
Wrong. It’s absolutely about quality. Calling me “disingenuous” won’t change that. If I am disingenuous, what, pray tell is my real agenda?
>What few of my colleagues will excuse you for is the presumption that fixing fonts is your job, rather than the job of the people who make the fonts.
Now I think we’re getting to the rub. Are you saying that web designers should not act, when needed and appropriate, to improve the look of their sites?
I’m not getting this.
>Nor are they likely to excuse you for actively alienating font makers from web authors at a time when these two groups of people need to find ways to work >together, just as print designers and font makers have productively done so for the past couple of decades.
Web authors and font makers *should* work together, that’s exactly what I’m saying. Please be specific and tell me in what ways web authors and font designers should work together. What should font designers do to adequately service web designers as customers and what should web designers do to help them provide the products they need in the form that they need it?
This forum is yours for that purpose. I’ll move it up into this post, or as it’s own post, if you would only write it.
Regards,
Rich
@john hudson
After some reflection, two more things:
1) Upon re-reading this sentence…
“Please excuse me for suggesting that upholding some minimum level of aesthetic quality might be a good thing for users, web authors, and font designers alike.”
it sounds scolding. Holier than thou. And I am neither a scold nor holy. The very idea makes me laugh. I struck the wrong word-tones. What I meant to say and will say now is that there is a price to be paid, by web authors and font designers alike, for not delivering quality to end users. There always is. And the attempt must be made. If you don’t like the fact that I’m a nag about it, well, tough.
2) You have referred to the market for web fonts as an “untested market” before.
“and that’s a risky proposition in an untested market of speculative font licensing. ”
And if the market does not “test out” quite to your liking, what are font designers going to do? There is nowhere else to go. Your statement implies a choice – the choice of not participating at all – I find it astonishing. One might as well decide to not participate in breathing until the air quality has been thoroughly checked.
It’s preposterous, man, really. Maybe that’s the real nub.
Regards,
Rich
I agree with you that we should try to do better with fonts being used online. That’s why, for example, WebINK does not currently serve .otf at all. You’ll see that the versions of Museo and Fertigo on WebINK are already in TrueType, and render better on Windows as a result.
Some day Windows browsers will start using DirectWrite for rendering, and to those browsers we’ll be able to serve .otf and get good results. But until then, we put all our fonts up in TrueType….
Cheers,
T
Thomas,
Thanks for the info on WebINK’s approach. The day is fast approaching when I’m going to have to bite the bullet and review font services. So soon I’ll see how you’ve handled it. (No objection to font services per se, it’s just a lot of work.) However – and this sounds a little contradictory but it isn’t – my advice is that you *don’t* exercise too much top-down editorial control. On the web, the producer with the most abundant supply does better than the one with less, regardless of “quality”, however you define that. You can’t skim the cream, the market won’t let you. That’s true in any industry but especially on the web which allows unlimited abundance at near-zero costs. The trick is to make the product the customer is looking for findable quickly, testable quickly, so they can move on to the next. Because more often than not, they will. Screen grabs and links to where the font is being used in the real world are helpful. A customer review process, a la Amazon, should also be in place. And a user generated rating system. Three stars, four stars, five stars. might be a good idea, too. You don’t have to rate the product, your customers will gladly do it for you. “Also boughts” that help move customers along the tail, should be considered, as well.
Good luck. I’m going to buy Suitcase Fusion for the Mac, today.
Regards,
Rich
Richard,
Well, I guess I appreciate you using us as the dominant proxy for all the other services. Obviously, we’re all looking for ways to improve screen rendering quality. But yes, it’s true that we do not autohint fonts in Typekit. There are reasons for that.
First off, all the autohinting methods we’ve tested are hit or miss, occasionally doing way more harm than good.
Considering the intricate skill set required to tune fonts accurately on screen, we’re committed to experimenting with and improving our own in-house processing algorithms. We’re also committed to supporting the manual hinting and redrawing efforts of our foundry partners — that’s why we’ve created internal tools with which they can test their type on the web, and in part why we devote time to working through individual rendering issues with our partners.
We are now aggressively investing in providing manual hinting of the more popular typefaces in our library. Naturally, we are doing this with the full permission and oversight of the designers who created those fonts.
We’ve always approached what we’re doing at Typekit as a process, and aimed at being as transparent as possible.
@jeffrey veen
Thanks for the explanation, Jeff. Appreciated.
BTW – I feel like George Castanza now – how does one go about becoming “a dominant proxy”, I wanna be one, too!
But for what? That’s the problem.
Regards,
rich
Side note: currently, I get EOTFAST marked as ‘attacking website’… and thanks for the interesting post.
@Tibor
Thanks for the tip on EOTFAST.com There’s been an outbreak of attacks on Wordpress sites lately. We’re working on getting it cleaned up and hardening security.
Glad you liked the post.
rich
Thanks for the post. If I may, I’d like to point out that Fertigo and Museo Slab, as made available through Fontdeck, both render acceptably well on Windows (see http://fontdeck.com/font/museoslab/500 and http://fontdeck.com/font/fertigopro/regular).
When I say ‘Windows’ I mean with ClearType turned on, which is how Internet Explorer comes nowadays. As mentioned by John Hudson, and as I’m sure you know, ClearType could be turned off, and also grey scale ‘smoothing’ could be turned on in its place. Or not. Any of these three scenarios could be in place, and fonts can be tuned for one or another (but not all without signifcant financial outlay), but I believe its reasonable to assume that the dominant scenario will be ClearType on, and so Fontdeck optimises for that.
Hi Rich. (BTW – people named Richard seem to be an exceptionally bright and talented bunch. Have you noticed that, too? Hah!)
Thanks for explaining where Fontdeck stands.
As far as Cleartype being turned off: First – and this ball’s been kicked around quite a bit – it’s never been persuasively explained to me how a TrueType font that’s well-hinted for Cleartype can potentially look a lot worse than it otherwise would with Cleartype off and font smoothing or grey scale on. Further, the basis for comparison should be the system “web safe” fonts. That’s the fallback and the baseline for comparison. And web safe fonts don’t look good under those conditions, either.
Second – and this idea sure isn’t original with me – there is really no such thing as “backwards compatibility”. there is no way to reach all the way back to the beginning of the web. (Well, I guess there is, kind of – you could write in HTML 3.2 but one might as well start writing prose using “thee” and “thou” instead of “me” and “you”.) There is always a cut-off point. And for the sake of preserving all our sanity, if nothing else, assuming Cleartype/ON is a reasonable cut-off.
We are on the same page.
With regards to providing adequately hinted TrueType fonts in general – it’s a tough problem, I know full well.
This won’t be my last post on the subject!
Hoping to see you at TypeCon next week or ATYPI in September.
{ 7 trackbacks }