Anti aliasing problem

Question

I am auditioning fonts on google web fonts and one that I was discounting was Ubuntu because it looked a bit jagged ( screenshot below taken straight from google); however afterward I read an article where it was mentioned as a good choice, and there was a screenshot where it looked really good ( to me anyway ). I am using windows 7 and have tried looking at it in chrome and firefox. I notice the same thing with some other fonts but this one is a good example because it looks perfect in the screenshot but not so good when I look at it on their site. I know this essentially is a question about setting my computer, but I thought that this would be the best place to pose the question: Is there something wrong with the settings on my machine seeing as it's obviously not showing the font the same on my computer as it did when the article writer downloaded it and used it in an image.

---

The screenshot from Google ...

The screenshot from the article above ...

Answer 1

I have spent a few hours on this as well, and yes, check your fonts on Windows Firefox. On my setup (FF 13, Windows XP) every Google font seems aliased - must be the ClearType thing, but some fonts are a lot better than others. Compare Chau Philomene One to Francois On -

http://clients.idea-bureau.com/font3.gif

and Francois One actually looks decent at smaller sizes.

I found that Vernon Adams' (designer of Francois One) fonts generally look ok and Open Sans looks practically perfect. I guess they did whatever they needed to do for the fonts to look good on Windows.

Answer 2

Try out different Rendering Modes

http://trentwalton.com/2010/06/29/css-text-rendering/

http://blog.typekit.com/2011/01/26/css-properties-that-affect-type-rendering/

edit: one more real good one for great justice : https://developer.mozilla.org/en/CSS/text-rendering

Answer 3

I have spend a good few hours looking at this and I thought I would share my findings. I can't guarantee these points are correct but it's the way it appears to me so I would appreciate corrections/additions to this in the comments if anyone thinks they know better.

• The font in question looked perfect in GIMP so the issue must be a browser issue.
• The browser issue seems to only occur noticeably in "Windows" ( and maybe "Linux" ) machines. Browser font rendering is at the mercy of the operating system and OSx apparently does a much better job at this than anything else.
• Firefox has made some attempts to help/override "Windows", though I think it may still be not so good, even though it seemingly was an improvement at the time.
• No browser on "Windows" renders fonts as well as GIMP - I presume PS does better again
• Chrome renders these much better than FF - Lots of information on the web suggests that Chrome is terrible but I think that must be referring to an older (ie pre 2011) version of Chrome or something as I have loaded the same font in both browsers side by side and Chrome is noticeably better.
• IE9 renders better than FF but not as well as Chrome ( current versions )
• Below 49 pixels Chrome's rendering is not exactly awesome either, this is at it's worst in the 20-48 pixel range. To my eye rendering above 48px is nearly perfect
• Css3's font-smoothing has no effect on windows machines.
• There is a text-shadow hack out there but I think it too has no effect on windows machines, though I think this may be something to do with browser versions
• There doesn't seem to be a huge awareness of how badly some fonts display on windows machines among the design community who often are mac users
• Certain web-fonts deal with windows better than others, explained below by Tim Brown, quote take from this website

TrueType instructions are an expensive, time-consuming effort that requires specific knowledge, patience, and technical and aesthetic aptitudes. Web fonts that have TrueType instructions tend to look very good on Windows; those without often do not.

Taking the above into account my own plan will be to select (or at least check) my fonts using FF on a Windows machine rather than on Chrome or on a Mac. For headlines it seems to be much better to go to >48px if the design allows.