I'm using Windows 7 with ClearType enabled.
On my website I'm using the font "Happy Monkey" from Google Fonts.
On my laptop (latest version of Google Chrome) it looks to have no anti-aliasing at all, whereas on my Nexus 4 (with Chrome) it looks so smooth, just like on the Google Fonts website.
I've tried font-smooth: auto;
under body
in my stylesheet, but it's still not very clear.
Could it be because of the resolution of my laptop compared to my phone (1366x768, 15.6" vs 1280x768, 4.7")?
Even if I zoom in fully on my Nexus, you cannot see a single jagged edge at all, it's completely smooth.
My font declaration
@import url(http://fonts.googleapis.com/css?family=Happy+Monkey);
body {
font: 14px 'Happy Monkey';
font-smooth: auto; // tried with and without this
}
Short answer: blame the browser if you're on Windows 7, blame both the browser and your monitor if you're on Windows 8.
Why Google Chrome on Windows 7 looks bad
The latest version of Google Chrome on Windows uses GDI, an API that provides legacy text rendering. GDI relies on strongly hinted fonts (fonts which explicitly specify how to reshape characters to make them look sharper and less jagged). Most webfonts from Google are unlikely to be serving the strongly hinted fonts that GDI needs to render smooth text.
Second thing is, GDI wasn't designed in the days where big font sizes were prevalent, so it doesn't render smooth text at large font sizes. It occurs everywhere even with the system fonts (e.g. Arial) that are already well hinted.
Android's built-in text renderer, however, is simply better at text rendering.
Blame Google Chrome for using a legacy API on Windows.
Alternatives
Internet Explorer 9+ and Mozilla Firefox use Direct2D, a new graphics API that provides better text-rendering. However, it is only supported on Windows Vista and Windows 7. You'll find that IE and Fx will render the text more or less the same on Windows XP because only GDI exists on that platform.
More on Cleartype
Cleartype refers to a multitude of rendering methods to smooth text out on a monitor. The Cleartype methods employed by GDI are vastly different than that employed by Direct2D. To further complicate things, Direct2D can simulate the Cleartype rending in GDI, or use a cross-over of the default Cleartype in Direct2D and the Cleartype in GDI. There is nothing much the web developer can do but hope that browsers choose a suitable choice. Take note however, that to one Cleartype might look smoother, to others one might think it looks blurry.
The issue with Windows 8
As if things weren't complicated enough, on Windows 8, in IE 10 and in Windows Store Apps, Cleartype uses greyscale anti-aliasing instead of sub-pixel aliasing on both the horizontal and vertical axes. This is because in Windows 8, screens are more likely to rotated, and using sub-pixel anti-aliasing would break as the subpixels are no longer perpendicular to the anti-aliasing direction. Since greyscale anti-aliasing doesn't use subpixels, it looks horrible if the pixels on your monitor are big (i.e. low-dpi/ppi monitor).
But hey, isn't this what Android and iOS do?
Greyscale anti-aliasing is indeed the method employed by Android and iOS. But since these mobile devices have such high dpi screens, it looks just about as good as sub-pixel anti-aliasing would offer.