There are two methods of antialiasing used in web browsers, greyscale and subpixel. Type rendered using subpixel antialiasing tends to look heavier than when rendered with greyscale. Most browsers will consistently use one or the other and in some cases it’s possible change your settings. Webkit on the other hand uses both at the same time depending on what styles are applied to the element.
By default, WebKit browsers will render type using the subpixel method. This usually ends up looking something like this:
The problem with WebKit’s handling of type is that you might end up with inconsistent type rendering or even flickering type if you are using any CSS animations. You’ll be able to tell the difference during the animation like so:
When you animate an element in WebKit, the element will change from subpixel to greyscale and then back to subpixel when the animation is complete. You can play with a couple different examples on this demo.
This is one of those little details that front end developers need to work around. The way to resolve this issue is to start out with greyscale antialiasing on the element. This can be acheived by placing this little snippet of CSS on the animated element:
By doing this, you will have two separate types of type on the same page. Depending on your site’s design, this may not be an issue. If it is though, you might want to consider enabling greyscale on all elements on a page for consistency. The downside of doing so might affect the overall performance of your site.