How to render thin fonts more smoothly in CSS 3 on Windows?

Question

When I\'ve designed my web site in Adobe Flash Pro CS6, the font looks like this:

Answer 1

I ran into a similar issue recently, same font family and size looked differently on Chrome, safari and Firefox. The chrome and firefox look especially thicker. This might not be the best way but worked for me

-webkit-font-smoothing: antialiased;
-moz-font-smoothing: unset;
-moz-osx-font-smoothing: grayscale;
font-smoothing: antialiased;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;

Also, its worth a while to checkout different rendering engines. CSS What are -moz- and -webkit-?

Answer 2

text-rendering: optimizeLegibility applies kerning to the font, wich can improve readability, but only if the resolution of the display and font-size is high enough. It doesn't make the font any bolder if it was too thin before.

The problem here could be font-families that have one or more faces that are lighter than normal (font-weight:400) – like Googles Lato.

If you load all light to regular faces of Lato like this

@import url(http://fonts.googleapis.com/css?family=Lato:100,200,300,400);

I made the observation that most Windows browsers and Chrome OSX use font-weight:100 if you specify anything lighter than 400 – (or normal, regular). Changing the font-weight: to 200 or 300 doesn't render any different, although the inspector tools insist the machine is displaying e.g. font-weight:200. Which it isn't.

Removing the lighter weights (100 in my case) solves the problem, and lets me at least use font-weight:200, respectively. Rendering isn't absolutely identical across browsers but similar at least.

@import url(http://fonts.googleapis.com/css?family=Lato:200,300,400);

This of course doesn't solve the actual problem not being able to access light font weights as specified.

Answer 3

I use this on all sites and it covers most issues with font rendering.

text-rendering: optimizeLegibility !important;
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale !important; 

Answer 4

Im going to prefix this with its a hack and i dont like it, but it works

transform: rotate(-0.0002deg)

It makes fonts noticeably smooth, albeit slightly thinner