Announcing the Type Rendering project
A short while ago, I pulled together some bright minds in the emerging web fonts scene: Tim Brown of Nice Web Type, Zoltan Hawryluk, and Ethan Dunham of Font Squirrel. I thought it would be wise to share notes and begin talking about cross-platform/browser type rendering (that lasagna of complexity), in order to clarify the entire process for ourselves and others and find ways to make web type look better.
Basically, I want @font-face text to look damn good.
Now we've set some goals and would like to open up the dialogue. We'll need your participation, and lots of expert advice, to fulfill these intentions. Follow Type Rendering on Twitter.
Check out How to Detect Font-Smoothing Using JavaScript to learn about an algorithm Zoltan has developed for determining whether a visitor's web browser uses font smoothing technology when rendering type.
If you want to see rich typography succeed, tell folks you care about how type looks on the web.
We'll be exploring all the layers involved in making sure web fonts are implemented in the best possible way. We'll need your help, too.
Follow me on twitter: @paul_irish
A short note that Tim, Zoltan, and Ethan have been driving this project forward just as much as me. It's fantastic to be involved in an area with so many passionate people. Thank you to them and everyone else who cares about web typography.
Paul, many thanks for your leadership and spirit of openness. From the beginning, this project has been all about asking questions and experimenting. That's the right attitude to have, and you're making it happen.
This area definitely needs research and documentation. I've been working on using the Meta font family on the Mozilla websites and running into complications with non-ClearType rendering (the default in XP).
It seems that most newer fonts are hinted for cleartype (rather than greyscale hinting), which looks great when you actually have cleartype (and seems to look great on Mac OS and Linux too). However, when you get to the millions of XP users who *don't* have cleartype enabled, you end up with unreadable rendering.
Solutions would be great, but at the very least, documentation would be a great help.
@Steven Garrity
Thanks for the note and screenshot. This is exactly why we're going down this road.
I think there's a lot of tricks we can pull to get things looking better today. Just gotta identify and agree on them. :)
I'll probably be contacting you later to see if you can help.
Hey paul, I have been doing a great deal of cross-browser font testing with a wide assortment of fonts lately. I've also discovered some things I haven't seen anywhere else on the tube-maze yet. This is kind of a convoluted issue that arises from a combination of small problems. It seems like a real obstacle to consistent results with @font-face though.
A: when fonts are converted from one format to another sometimes (often even) their internal naming gets messed up. So bold is italic and regular is bold or some such. I suspect this is part of the cause of many of the messed fonts I have seen installed on computers now and then over the years. Though there may be other causes as well, like multiple versions of fonts with the same name. The point is that there are bad fonts in the wild that will not display as you would expect.
The solution could be to just make sure that font-family:'My Font'; uses a different name than the actual font and not give any src:local's then you could be sure it DLed and used your font rather than risk it using a messed up font with the same name.
B: IE will not honor the font-family:'My Font'; name you give it and actually be able to use the font, unless it is the same name as the real internal name of the font (not the file name, the font's internal font name).
Ok, no big deal because IE won't use their local fonts no matter what, so even if it has the exact same name as an installed font on their system it will still DL and use the .eot.
A + B: This is a problem. If font-family:'My Font'; is the real name of the font (which it has to be for IE) and that font is installed on the users system, then FF will use their local font (which could be messed up). Even with no src:local's defined.
So for IE to work, you must allow FF to use local fonts if available, and local fonts may not be correct.
Also, there are some fonts that I can not seem to convert without some funky naming issues arising. Hypothetically, if I really want to use those fonts I might just use them with messed up names. Just use the one that looks 'regular' even though it's name is 'bold'. There are two sides to that (I wouldn't really - but other may). This would would reverse the situation. Now they might have correct fonts while mine is messed up.
1: to use such a font like that with @font-face would really require that I not use client's local fonts because my fonts would be wrongly named and would display the real italic instead of my misnamed regular.
2: While doing this may be tempting to some who can't get the proper conversion with a specific font, it could increase the number of bad fonts in the wild.
Something to think about..