This year on 24 Ways, Jeffrey Zeldman wrote an article about the rending problems of “real fonts” on the web. The one line summary: different browsers and different platforms do “hinting” differently which can be bad news. Of course, like nearly everything Mr. Zeldman says, he has a good point.
Then Jeffrey Veen chimed in:
Now it’s screen rendering. Next, it will be the performance implications of downloading fonts with international character sets. After that? Maybe inconsistent browser support of kerning metrics, ligatures, or other Open Type Metrics.
It’s going to be a long road.
Kinda puts thing in perspective doesn’t it?
In the long long ago, we used <font> tags. Then there was CSS, but we still only had the “core” web fonts. People were fed up and technologies like sIFR emerged. Now @font-face is really getting legs, but there are legal implications. So services like TypeKit emerge to help. But now font hinting creeps in and we get unhappy again. Then after that is solved, as Mr. Veen points out, there will be a long line of new things to be unhappy about. I can think of a few myself, for example, since fonts are vector, why can’t we apply strokes to them on the web?
I think we’re all going to need to be critical and help push things forward, but remain glass-half-full at the progress that has been made.
It is a shame that we just cannot fast-forward to that far distant point where fonts render beautifully, quickly and exactly as the designer wishes!
Until then I generally take a quite conservative view on fonts and play it safe so I can manage download times, rendering and overall appearance as much as possible. I feel though, with the improvements in Typekits services, I should be more adventurous with fonts as, after all, HTML5 and CSS3 are now in my tool bag, why not start making use of the current technologies rather than bemoaning the drawbacks!?!
Sometimes monopolization doesn’t seem like such a bad idea – at least for the OS and Browser market (I’m naturally saying this with a tone of irony…).
I recently used @font-face myself for my blog and there were/are quite some issues I had to deal with.
The rendering under Internet Explorer is horrible…
I even had to create a separate style sheet for safari (first time ever), because it added a top-margin to the custom font.
I’m really looking forward to a wider and more standardized support for custom web fonts, but I don’t think that it should stop us from playing and experimenting around with it – I certainly won’t.
Yes, there are many issues, but poor screen rendering is the only dealbreaker right now keeping this implementation from being production-ready. Read Boing Boing’s experience with @font-face… pretty eye-opening.
Cufon had been my tool of choice until finding this font face generator which really takes the hassle out of @font-face. I particularly like that it includes a base64 css copy of the font.
Having said that… there is still a looooong way to go before I’m happy with the control I have over fonts.
I think the future is definitely positive though!
Chris,
Yipes did you mean rending… or rendering?
I suppose if your fonts are messed up it does tend to rend your site big-time.
Anyhow – I’m a big fan of your site. Keep up the great work and thanks for sharing the great tips!
-Loren
A good example of that are the Envato marketplaces. A lot of rendering issues there because of the cufon.
I think that has more to do with bad execution. They should have anticipated long product titles.
I agree that the outlook of glass-half-full is the best approach to any solution. Fonts have come a very long way, and that is something to be optimistic about. However, like you mentioned it is going to be a long road and always will be – innovation never stops!
Excellent one!!
This is the same with anything though, Look at computers we have made leaps and bounds in a very short period of time but were still not happy, and always want something better. It will never change
Absolutely. Even in the Apple camp, the fans are thinking “so what?” about the news of the iPad.
Having underused my Windows Tablet PC and switched to MacBook, I was expecting something a little more MacBook-y with the Apple tablet, not a netbook-sized iPhone.
A friend had to remind me that even though it doesn’t appear to do what I want it to, it’s still a major development towards rethinking the tablet computer as a lifestyle device.
Sigh. Everybody wants more. Especially me!
-Tony
Welcome to the wonderful world for web development. If those bugs weren’t present it wouldn’t be such a fun job to practice. There will always be inconsistencies in browsers. You might as well get used to it. And accept that they are there and move on.
That is what i love about web development / front end development. You are rapidly evolving your debugging skills. Stimulates the brain and creative juices. This jobs never gets boring ;)
If you really want to make a difference. Fork the render engine source and patch it your self :)
” I can think of a few myself, for example, since fonts are vector, why can’t we apply strokes to them on the web?”
We got SVG fonts thats the closed we would ever get :)
SVG fonts would be a great idea… IF all the browsers could decide what standard they want to support. I’m having a terrible time getting usable SVG graphics in all browsers. For the first time, the image is readable in IE, but the fonts are horribly oversized in FF. Don’t even ask about Safari. ;-)
-Tony
No doubt about it, most font rendering problems are out of my control. But as you say, Chris–the glass is half full.
Just a year ago I was struggling w/sFIR, then relieved when Cufon became available. Had an issue w/Cufon during a WordPress upgrade and resolved it by turning to @font-face (which had it’s own problem!).
By the time I received my Typekit invite, I was hungry for MORE fonts, MORE options, MORE simplicity!
While none of the replacement techniques are yet perfect, not being stuck w/Arial and Times Roman lets me stretch as a designer and utilize appropriate font(s) for my clients.
Really–it’s all moving so fast–rendering improvements are just around the corner! :)