: Anti aliasing problem 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

@Alves908

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 -
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.

Vote Up Vote Down

@Carla537

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.

Vote Up Vote Down

@Vandalay111

Try out different Rendering Modes
trentwalton.com/2010/06/29/css-text-rendering/ blog.typekit.com/2011/01/26/css-properties-that-affect-type-rendering/
edit: one more real good one for great justice : developer.mozilla.org/en/CSS/text-rendering

Vote Up Vote Down