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:
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.
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>
You are never going to get sites to look the same in different browsers or operating systems, they are using different technologies all have different opinions on what is better etc etc.
This is something you should not care about, imho. 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.
Focus on real issues like front-end performance, usability, no one is going to notice a small font difference between browsers -except us developers-.
Browsers inconsistencies is a thing front end developers need to live with. Its great if they all look the same but that's not going to happen -don't get me started on browser compatibility, dropIE8-.
You can use "hacks" but this will only bloat your CSS, since you will probably need different fixes for different browsers.
Things you can try:
text-shadow: 1px 1px 1px rgba(0,0,0,0.004); text-rendering: optimizeLegibility !important; -webkit-font-smoothing: antialiased !important;