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)

Angel

WRT your edit: Is your question how to make the browser use a thinner font than weight 600? – Laurencelaurene

Please post the HTML and CSS code you are using. It is normal to have fonts rendered differently by different programs, but the difference here looks too big to be explainable by that alone. – Nicole

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;

Angel

Can anyone explain why this works and what we're losing by setting this? – Lagerkvist

@Lagerkvist "Smooth the font on the level of the pixel, as opposed to the subpixel. Switching from subpixel rendering to antialiasing for light text on dark backgrounds makes it look lighter" - developer.mozilla.org/en-US/docs/Web/CSS/font-smooth – Footboy

Love this. So much cleaner. Should be the default behaviour in my opinion – Clamatorial

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. */
}

Unoccupied

Thanks, please see update to question – Angel

@Angel are you using the same font size? Are you using pt units? – Unoccupied

I am using px in both cases. – Angel

@Angel can you not simply change the font weight in the browser from Semibold to Normal? – Unoccupied

Unfortunately not, the regular and semibold weights appear quite differently. – Angel

Don't you mean font-weight instead of font-size? – Flotage

@FredericLeitenberger Well spotted. – Unoccupied

Answer 3

The Open Sans Webfont comes in 10 styles. For me it looks like the browser displays the semibold one. It should be regular and you should go fine.

Take a look at fontsquirrel

http://www.fontsquirrel.com/fonts/open-sans

Wart

I think you mean "10 weights". There are only 3 different font styles! – Laurencelaurene

You're right - I meant styles because all weights have single stylesheets :) – Wart

Answer 4

The simple answer is that there isn't a fix. If you are properly loading and calling the desired style and weight, then sometimes things just render differently between adobe and web browsers (or browser to browser). Your options are to go to 400 weight or learn to love the boldness.

Vesiculate