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

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

Font rendered in Adobe Flash Pro CS6

The font looks smooth and slightly thicker, and when I create HTML and CSS to render the font in a browser, it appears like these, respectively in IE, Firefox, and Chrome.

Font rendered in IE, Firefox, and Chrome browsers

It appears thinner and pixelated in some areas. I've seen much smoother font rendering on OS X. How can I make the font appear smoother in these browsers? I'm assuming this is a problem with ClearType, which looks hideous with thin fonts like this one.

Here is the code I'm using to test, so answers can be tested before being posted:

<html>
    <head>
        <link href='http://fonts.googleapis.com/css?family=Lato:300' rel='stylesheet' type='text/css' />
    </head>
    <body>
        <span style="color: #333; font-family: Lato; font-size: 32px;">Question or concern?</span>
    </body>
</html>

Solution 1:

You are never going to get sites to look the same in different browsers or operating systems, they are using different technologies etc etc.

This is something you shouldn't really care about. People who use IE are not going to switch to Firefox or Chrome or vice versa. They are used to the way fonts look and are not going to notice.

Browsers inconsistencies is a thing front end developers have to live with (sadly). Its great if they all look the same but that's not going to happen

Things you can try, you will probably need different fixes for different browsers.:

text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
text-rendering: optimizeLegibility !important;
-webkit-font-smoothing: antialiased !important;

Edit 1: DirectWrite is now on chrome for windows which will improve the rendering.

Edit 2 (2017): System UI fonts

Another thing you can try is use system fonts for improved UX.

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;

Readup - smashingmagazine
Readup - booking.com
Readup - medium

Solution 2:

I find that in Google Chrome you can add -webkit-text-stoke to improve the appearance of fonts.

for example:

-webkit-text-stroke: .025em rgba(51,51,51,0.50);

Solution 3:

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.