Hi guys (and girls)
Just found the site at an apt time in my life, so hoping to learn something and share ideas. Also creating my first font after 15 years as a professional digital artist (shameful, yes) but that's another topic.
I searched the forum but didn't see anything about this in the results. Wasn't sure if it should go in Design section as it's more general to all font use in browsers, especially now with CSS3 and @font-face. Feel free to move it if you like.
I am curious how the rest of you handle webfonts when it comes to various browsers and platforms, as far as front-end web design goes, not designing typefaces. I use Mac, and I've noticed that webkit browsers render fonts considerably thinner than the others. If using a font face that isn't too thin, I can usually get some wiggle room using -webkit-font-smoothing in CSS3 to force them in the direction I need. Sometimes a font needs to be abandoned though because it just won't hold up, and using this method in Safari on retina MacBooks can make them alias.
However, when using thin fonts, they usually fall apart in webkit browsers at smaller sizes, whereas Firefox renders them excellent—which surprised me because Firefox seemed to be falling off for a while, and now even has exceptional support for CSS3 with very smooth, snappy animations that are surpassing Chrome and Safari in my recent tests. Firefox always seemed to render fonts a bit bolder, so maybe I just prefer the way it renders them now since it's getting so much better in other aspects it lacked in ;)
Typically, I try and use font faces that either (a) aren't too thin, or (b) ones that have various weights, so I can assign a bolder face overall, and then define thinner fonts for Firefox in an @moz media query. This doesn't work though when a font falls apart in a single browser, as it's difficult if not impossible to target a specific browser version without excessive and unreliable methods, let alone tell how it will behave in different OSs or on different devices.
Safari is truly the most horrible at the moment, and I used to live in it on the web. I've read some posts on here where others are also becoming more and more displeased with Apple's descent into this sterile, jail mentality of "experience things how we say or not at all." Thin font faces that hold up in Chrome just start aliasing in Safari. It could be that now with a retina MacBook Pro I'm just seeing more nastiness than before, but Chrome and Opera are doing a better job regardless. Overall I find the retina display beautifully renders type, but it's heavily dependent on the software being used, in this case browsers. Standard fonts look great unless very thin and not used in titles (helvetica neue thin comes to mind).
Today I did a test with Adobe's Source Sans Pro, subset with fontsquirrel, and tried with the various hinting settings and em square of 1000 and 2048. I also tried with the prepackaged webfonts from Adobe on github, though massive in size for web. Either way, the extra light dies in Safari unless it's a large title font (i.e. with a base of 16px set to 2-4 em it can hold up, yet still thinner than it should be), and is very very thin in Chrome and Opera. Firefox renders it a bit bolder and it looks great—it is nice and thin but solid enough where it is perfectly legible. Granted, this is a light face, but not the thinnest by any means.
Also, now with new devices coming out every Tuesday, curious how you all handle checking fonts in your web designs. I stopped running Windows about a year ago because I was sick of it dying for no reason, and Microsoft trying to tell me I didn't own it, when I bit the bullet and paid for it outright. I still have it in Parallels though. Do you use any online services (paid, free), do you buy extra devices, etc.? Do you think font rendering should be standardized when it comes to standard apps like browsers, instead of making font designers and web designers have to do so much extra work trying to give people the same experience? AND do you think standardization would become easier if we dispensed with software patents, where much of this seems to stem from (short answer version will suffice here so we don't start a war about GPL/FOSS).
Anyway, curious to know how the rest of you approach this, if you assign different weights based on browsers, and how you go about testing on various devices. I personally am still broke and can't afford a testing service like Microsoft's, or buying all these devices to test on, still crippled from the lovely dump the economy took on us.
Sorry it's a bit long-winded but I could have expanded more as there are many variables when handling fonts in web design based on the project and demographic. It seems this is one area where technology is definitely not making life easier, and too much time is wasted trying to make things work without even getting into fallbacks and fighting with IE.
thanks