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 much different to what we see in Photoshop.

It’s 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.

Finally, Firefox has also implemented a similar property called -Moz-osx-font-smoothing and it is available from version 25. Try adding these properties to your heading tags or to the whole body.