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


Tags: html5,css3,web,fonts,rendering

Problem :

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 :

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;

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


    CSS Howto..

    How to add an image to a transparent box using css

    How to Create hidden CSS?

    How to Convert RGB to HEX ( for Gradients )

    CSS - How to hide div by hovering another div [duplicate]

    Are there any browser development tools that show you what level of the DOM an element is, so I know how to select it with CSS?

    How to align text next to an icon with CSS?

    How to create CSS dropdown

    How to get style of a div from javascript file

    How to persist CSS changes with Chrome Developer Tools

    How can I force browsers to print background images in CSS?

    jqueryui menu's submenu — how to keep in front

    How to reveal part of blurred image where mouse is hovered?

    how to change attribute of table cell based on contents when table rows created by while loop with PHP

    How to set color on mouse hover - css

    How are multiple spaces showing in HTML, without pre, nbsp or white-space: pre?

    How do I make an element scale down to nothing using a CSS transition on the iPhone?

    How should I re-create this design in HTML and CSS?

    How to make text input in table cell grow beyond the limits of the table when selected?

    How to Change CSS Styling on a Checkbox on Hover with JQuery

    How to get all blue background divs to align to the left and get all the red divs to align to the right using the css float property?

    How to get the profile pic aligned center?

    How to set CSS rule for a DIV in a LI of class UL?

    How to create slanted tabs with a border in CSS? [duplicate]

    LESS CSS - Adding a percentage to a hex color - How does this work?

    HTML/CSS slideshow without javascript

    boostrap menu active page dont show style

    How do I require an HTML document (webpage) to be a certain size, or use scroll bars

    jQuery on click shows div but it flickers and disappears

    css nested classes, how to not repeat code?

    How to remove line in the middle? [duplicate]