Why is my text blurry?

This is because of subpixel rendering and it’s standard browser behavior.

Basically, when browsers rasterize text to fit the pixels on a screen, they anti-alias at the subpixel level. In general, this produces the sharpest text on non-retina screens, and so it’s a cross-browser standard.

However, in some cases, depending on the position of the text relative to the pixels on the screen, you may end up with blurred edges. This happens case by case, and changes based on several variables—the position of the text, pixel density of the screen, etc.

It’s similar to pushing text around in Photoshop by 0.25px at a time. Sometimes the aliasing is blurry, sometimes it isn’t—regardless of which antialiasing method you use.

-webkit-font-smoothing works by overriding the browser default and using full pixel anti-aliasing instead of subpixel anti-aliasing.

Because user environments can vary so much, it’s generally best to defer to the browser default for text rendering.

For more details, see: