Font renders thicker in browsers [closed]

Question

I am using the Open Sans font on a web site, but it appears much thicker in all browsers than in Adobe Illustrator (see attached images). Why is this and is there any way I can get the font in the browser to display "thinner" please?

Note Both the browser and Illustrator are rendering the Semibold weight (600)

Answer 1

The issue was with aliasing. The following css solution will work for safari, chrome and firefox:

-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;

Answer 2

Make sure you're including the light (300) and normal (400) weights for Open Sans, then you can simply:

body {
    font-family: 'Open Sans', sans-serif;
    font-weight: 300; /* Or 400, if 300 is too light. */
}