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

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);


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