The following pages have been created in order to test the way modern browser supporting CSS 3 and HTML 5 handle the new “web fonts”.
I recommend to look at them using different browsers and of course digg into the code.
One area of weakness is the italic or oblique form of those fonts. Sometimes barely slanted (“penché”), sometimes using the specially designed form.
However outside the normal and bold version of any web font, I do not recommend to spend too much time on other variations (italic, light, condensed, etc.) as they are currently not supported the same way by the various rendering engines of the “modern” browsers.
The copyrighted fonts used are supposed to be very well “hinted”. It means they have been designed to look good on mobile high resolution screens without using special LCD antialiasing algorithms found on OS X and Windows (Cleartype). By displaying them on your low resolution screen (less than 166-200 pixels per inch) you are not watching them in their right context.
Does it matter?
I don’t think so. Using specific fonts just add more elegance to a page (if done right) but doesn’t improve dramatically the user experience. Currently the risk the browser do not render the page properly is high (by not using the right form of the font) then the user experience can be damaged. By example not showing words that should be in bold thus preventing the way people scan the page.
What’s more important to improve legibility is to increase the line-height (white space between the lines).
Tool set used as August 2009: Safari 4 (OS X / Win XP), nightly Webkit (OS X), Chrome Beta (Win XP), Firefox 3.5 (OS X / Win XP), Internet Explorer 8 w/o compatibility settings (Win XP), mobile webkit, preferably on any high resolution screen.