Why does the font on my website look so much smoother on Chrome for Android?

Question

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
}

Answer 1

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.

Answer 2

This is an answer instead of a comment because of its length.

With that being said, using a font through Google Fonts is a pain right now with Google Chrome. Plus, dealing with font aliasing in general requires a lot of testing and is a pain which often requires you doing some research into whatever works for your target devices.

Here are some links on the problems you're facing:

• http://blog.webink.com/font-rendering-in-web-browsers-a-find-your-font-adventure/
• http://blog.typekit.com/category/type-rendering/

Solutions I've Found:

• Use better fonts. FontSquirrel has several great fonts which have multiple formats instead of the single .woff from Google Fonts. They also have webkit starters which even has the CSS written for you.

If you try to load fonts in Chrome and want better rendering -- be sure to put the SVG on the top of the declaration. See here for more information.

• Avoid using custom fonts. Shame, but it is a solution -- and often times "fancy" fonts aren't really needed.

Answer 3

It is indeed due to the difference in hardware pixel density between your two devices. Cleartype is just a fancy name for the distortions Microsoft applies to glyph shapes to hide the crenelation effects produced by too big pixels. It can not totally hide them. Typical screen pixel density (96 pixels per inch) is really too low to display properly text. On your nexus density is way higher and you don't notice individual pixels (and I'm pretty sure Google does not even bother hiding them with Cleartype-like effects).

You can easily check the wreckage caused on text by too low pixel density by comparing the same text printed at 600 dpi and 150 dpi. (screens are a bit different medium but not that different)