Turn antialiasing on for Chrome to match behaviour across browsers

[niieani]

Hi guys,

For some reason only Chrome doesn't antialias fonts by default.
The fix is to add:

body
{
-webkit-text-stroke: 1px transparent;
}

Here's an example, on the top antialiasing enabled, below default rendering.

http://dl.dropbox.com/u/114474/font-smoothing-chrome-2.PNG (unfortunately github forces a resize for the picture, so here's the direct link)

Note the 'S' and 'O' - default rendering makes it look horrible.
Applying this matches the behaviour of Firefox, IE and Safari (they antialias by default).

What do you think, should we add this fix? I apply it to all my sites manually.

[paulirish]

this will affect chrome/win, chrome/mac, safari/win, and safari/mac

when i think you only want it affecting chrome/win..

:/

[niieani]

Indeed, I have not tested other platforms yet though.
I think what happens is that Chrome has different text rendering engine for text with effects applied - then this fake - transparent effect is applied, it engages the other rendering engine.

EDIT:
Would there be a way to apply this only to Chrome?

[niieani]

I've just checked Safari, I was mistaken in that it also does not antialias by default on Windows (there is a setting to change that in options, but that's disabled on Windows). Therefore this fixes Safari/Win too.
I will check Chrome and Safari on a Mac and Chrome on Linux and report back.

[necolas]

@niieani If possible: please can you also test on iOS and Android, at small through to large font sizes, for different font-families (especially serifs vs sans-serifs) and for dark-on-light and light-on-dark text color. Previous attempts to change antialiasing have not been without significant drawbacks so we need really thorough testing :)

[niieani]

I've checked Safari/Mac and Chrome/Mac.
On Safari there is no difference with or without this setting - in both cases it is already antialiased. On Chrome with and without the text is antialiased, but there is a slight difference in how it's rendered, not sure where, but it's neither for better of for the worse it just seems like some of the shaded pixels are in a different place (the difference is only visible when comparing by switching A/B, otherwise it would be undistinguishable).
I don't have access to an iPhone or an Android phone at the moment, so if there is someone that would be able to check it, I'd appreciate it.

[chuanxshi]

iOS5 beta 2 test result:

black background with white text:

black text with white background:

[chuanxshi]

Android 2.3.3 test result:

black background with white text:

black text with white background:

[niieani]

@shichuan: Which one is before/after applying this?
I've just tested:
-webkit-text-stroke: 0.001px transparent;
and it seems to be working too (switches the font rendering engine). I think that one would be safer in terms of the actual rendering (0.001px is less than a subpixel so there should be no difference except that of the engine being enabled).

[necolas]

Thanks for the tests so far. Also need to check how this performs (scroll etc) on pages full of text on desktop and mobile.

[chuanxshi]

@niieani: all screenshots were taken after the change.

[chuanxshi]

@niieani: doesn't seem to have any difference before/after, even when zoom the text to the max.

[AndyHendy]

Anyone have a suggestion for resolving the same issue in Firefox on Windows? The -webkit-text-stroke style rule resolves in Webkit browsers, but obviously has no effect on FF. Still looks choppy. http://superwebdesignguy.com/dev/sprongo/splash.html

[Fatbat]

I don't know why we're all seeing different results. Only Firefox 4 or 5 and IE 9 have native antialiasing on Windows!

Chrome, Safari and Opera do not. Safari does have proprietary font smoothing built in, but its default is "Windows Standard", ie. it's not turned on when you first install it, you have to manually enable it.

As discussed with Andy last night, this smoothing hack only really works on chunky bold headline fonts and looks awful on body copy. It effects both Chrome and Safari as Paul pointed out, unless of course you already have font smoothing turned on in Safari, then there is only a tiny difference that might not be noticable.

I really dislike Safari's built in font smoothing as it makes type appear much bolder than it really is. It isn't using ClearType but some proprietary smoothing method instead but that's another discussion altogether.

Andy, have you looked at your system settings, under Control Panels/Display/Adjust ClearType text to ensure that ClearType is in fact enabled system wide? Without that turned on the text won't be antialiased in Firefox.

[Gavrisimo]

Here is my little test first with out this -webkit-text-stroke: 0.001px transparent; fix and then with that fix:

http://i.imgur.com/ygTwO.png

I used Google Chrome and Safari on windows 7 with MyriadProRegular font. Its pretty much same result in both results, but the screenshot is taken in Google Chrome.

In control panel i have this setting Adjust ClearType text turned on.

In firefox 5 text is working fine btw.

[AndyHendy]

@Fatbat I imagine my font smoothing is turned off. Not really comfortable relying on end users to turn on their font smoothing in order to see the font properly. Would be nice if this was possible to temporarily activate when viewing a certain page that called for it in a meta tag.

[Fatbat]

Correction: Font smoothing is on by default in Win7 and Vista, not XP though.

[AndyHendy]

Just checked. ClearType is on and was on by default. Not sure why I am seeing the font display issue.

[csnover]

The OP’s screenshot looks to me a lot more like incorrect ClearType calibration than text anti-aliasing being off (if you zoom in on the screenshot, you can see colour fringing which is a dead giveaway that something is trying to do sub-pixel AA). Try running ClearType Text Tuner and see if things improve after doing so. (Also note that a screenshot of sub-pixel AA that looks bad on your monitor might look fine on the original one.)

[niieani]

More on this matter:
http://bashelton.com/2011/03/force-font-smoothing-in-chrome-on-windows-hack/

Unfortuately the trick I found does not work anymore in the latest -dev version of Chrome (v14).
Any new ideas?

[necolas]

There doesn't seem to be any good, safe method to have consistent antialiased fonts in most modern environments. I'd be on the side of closing this issue and leaving the default browser/OS font rendering in place.

[csnover]

As I said earlier, all of the text is already anti-aliased. All that these hacks are doing is changing the text renderer so that it doesn’t perform sub-pixel AA.

[niieani]

csnover, I don't think you are correct. Look again, carefully at the second text here:
http://dl.dropbox.com/u/114474/font-smoothing-chrome-2.PNG (second one)
Especially noticable on letters 'S' and 'O'.
The same text on Internet Explorer 9 or Firefox looks good and antialiased. So it is not a question of calibration of ClearType, it's a matter of antialiasing being forced of by WebKit in the CPU rendering mode (the different tricks worked, because they engaged the GPU rendering - which for some reason made the fonts antialiased).
As far as I know, the problem only exists on Windows+Chrome, because Windows+Safari has built-in it's own subpixel antialiasing method.

[csnover]

@niieani: Just because it appears to be wrong doesn’t mean no anti-aliasing is being applied. Zoom in 400% and you see this: http://i.imgur.com/6em4w.png. Perhaps the AA mode is incorrect, but it is at least attempting anti-aliasing. It would probably be more illuminating to look at the same text in a browser that is performing sub-pixel AA “correctly” to see what the rendering differences are, and see if other Chrome users experience the same problem on a test case (scanning this ticket I don’t see any test case posted, just screenshots).

[ghost]

Cleartype looks like crap on large text, it looks the same in IE8 as in Chrome.
This "fix" actually forces grayscale AA, and makes smaller text look much worse.

Check this out in IE8 and Chrome: http://jsfiddle.net/RA2Mu/1/ .
And this, see how the second line is forced to grayscale AA in Chrome, and is nearly unreadable: http://jsfiddle.net/Eu6gs/ .

Edit: To clarify, IE9, Firefox and Safari on Windows all use different font rendering.
Chrome rendering matches IE8 and other Windows apps.

[niieani]

@csnover: OK, maybe you're right, but then why does IE9 and Firefox antialias "correctly" (whatever that is, to me at least, it means no visible rough edges on fonts) and Chrome doesn't. I can confirm that other Chrome users using Windows experience the same problem, because it's a huge issue all over the net (take the example of the article cited above or this topic on Google Chrome help forum - look at the related discussions on the right too).

[Fatbat]

Cleartype is perfectly fine in IE9 but looks as rough as Chrome in IE8. There IS subpixel anti aliasing going on in Chrome and IE8; when viewed on a white background there are red and blue pixels fringing the letters but it's just not as strongly applied as it is in Firefox and IE9.

[niieani]

I guess the matter is that there is subpixel antialiasing going on in Chrome on Windows, but without simple font smoothing (rounding corners) beforehand. What we need to figure out is how to enable/apply font smoothing in Chrome.

[paulirish]

We have a history of fighting against text rendering and losing:

0cec104 <= revert -webkit-font-smoothing: antialiased;
0d7f8d7 <= revert type-rendering: optimizeLegibility

I'm interested in seeing someone write this up with plenty of example screenshots, demonstrating the differences across browser/os/smoothing enabled combos.

... And what the techniques are for addressing those differences. It's a hairy situation. But until someone does substantial and comprehensive research on this, I'm not ready to land any changes.

Also, since I work for Chrome, I should remind you that if you want Chrome to act differently, you should try filing a ticket. You can do that at http://new.crbug.com :) Thanks