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

There's no single fix for this, as far as I'm aware. It's multiple fixes implemented to suit each browser, except IE. Give these a shot:

For Chrome, and any other browser using webkit:

-webkit-font-smoothing:antialiased !important;

Place that in your html CSS, or for whatever elements you see fit. You can also add this along with the above:

text-shadow:1px 1px 1px rgba(0,0,0,0.005);

Experiment with different alpha values, but you should keep the shadow sizes as they are.

I'm unaware of anything else you can do, but this should address the biggest problem with Chrome at the very least (plus other webkit browsers).

Answer 2

You may be able to fix this using the css property text-rendering.

Example:

text-rendering: auto
text-rendering: optimizeSpeed
text-rendering: optimizeLegibility
text-rendering: geometricPrecision
text-rendering: inherit

You would probably want to use text-rendering:optimizeLegibilty.

More information here: MDN Text-Rendering

Answer 3

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

Answer 4

I think this is more a Windows problem than a browser problem. The same browsers render the same fonts much more smoothly on other operating systems such as Linux or Mac.

In Chrome, and by extension any webkit browser, you can use the following code to smooth your fonts:

-webkit-font-smoothing: antialiased;

or

-webkit-font-smoothing: antialiased !important;

Typically, I find that this doesn't do a whole lot. I think we'll just have to wait for Microsoft to do something about it.

Answer 5

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

Answer 6

It's late but did you ever try hint the font files? Go transfonter site and upload your font files. Then the options area check the auto hint option.