Improving Font Rendering With CSS

I think most front-end developers have accepted that fonts in the browser, and especially the ones on those large headings, look very different than what we see in Photoshop.

The fonts are a bit thinner, smoother, and generally much, much better in PS. We can’t really change the way fonts are rendered in the browser, but for some of them, we can use a simple CSS trick to achieve Photoshop-like quality. In WebKit, we will use the -webkit-font-smoothing property. Firefox has also implemented a similar property called -moz-osx-font-smoothing, and it’s available from version 25. Try adding these properties to your heading tags or to the whole body:

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

Let’s have a look at the dramatic difference this makes on OSX:

Without and with antialiasing

This will work nicely on Chrome, Safari, and Firefox on a Macintosh computer. If your text is a bit too thin and blurred in WebKit browsers (especially when CSS transform is applied to the container), you can try adding some -webkit-text-stroke with a value lower than half a pixel. Something around 0.15–0.45px should work. For other font sizes or colours, adding a…