3

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
}
cantsay
  • 1,967
  • 3
  • 21
  • 34
  • Can you post your `@font-face` declaration too? – Eric Hotinger Sep 18 '13 at 17:35
  • sure, I've updated it – cantsay Sep 18 '13 at 17:36
  • actually, if I zoom in fully on Chrome on my laptop, it looks okay as well (still not as clear) but when zooming out it looks horrible again. If I zoom out fully on my Nexus it still looks perfect, even when it's small – cantsay Sep 18 '13 at 17:38
  • 1
    AFAIK, windows font renderers do a very 'sharp' edge, with little antialiasing, while MacOS X are much more 'smooth'. I've heard some people refuse to use Mac only because they dislike the 'unfocused, blurry' text appearance. Could it be a similar difference between windows and android? – Javier Sep 18 '13 at 17:43
  • Google Web Fonts do not currently play well with Google Chrome (ironic right?) Theres no way to avoid it that I know of, other than to not use Google Web Fonts and just use a custom font-face declaration yourself. Google Paul Irish font-face for some proper tutorials. – Michael Sep 18 '13 at 17:45

3 Answers3

5

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.

Henry
  • 1,339
  • 13
  • 24
1

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:

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.
Community
  • 1
  • 1
Eric Hotinger
  • 8,957
  • 5
  • 36
  • 43
0

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)

nim
  • 2,345
  • 14
  • 13
  • I thought about this, but I took a screenshot on my Nexus, uploaded it and it looks fine on my laptop – cantsay Sep 19 '13 at 13:38
  • The other part is that microsoft implementations of too-low-pixel-density compensation are heavily biased towards 'sharp' black text (the other possibility when you don't have small enough pixels is blurry smooth shapes) – nim Sep 19 '13 at 18:28
  • But even then give windows a screen with the same pixel density of your nexus and you'll find the result perfectly fine. There are endless discussions on the internet on what is the best strategy when your pixels are too big, but even the best strategy will only approximate the text rendering quality you get with smaller pixels. If you're interested on the subject take a look at http://goo.gl/yf3M7 or http://antigrain.com/research/font_rasterization/ – nim Sep 19 '13 at 18:39