Font renders thicker in browsers

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?

Illustrator

Browser

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

WRT your edit: Is your question how to make the browser use a thinner font than weight 600? — Mr Lister, Jan 29 '15 at 14:56
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. — Jukka K. Korpela, Jan 29 '15 at 17:56

score 46 · Accepted Answer · answered Jan 30 '15 at 05:08

46

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;

answered Jan 30 '15 at 05:08

RunLoop

20,288
21
96
151

Thank you so much! – Nikolay Tsenkov Sep 18 '16 at 14:08
2

Can anyone explain why this works and what we're losing by setting this? – Matt Apr 12 '19 at 18:42
1

@Matt "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" - https://developer.mozilla.org/en-US/docs/Web/CSS/font-smooth – ESR Feb 20 '20 at 20:38
Love this. So much cleaner. Should be the default behaviour in my opinion – gkpo Apr 28 '21 at 07:18

James Donnelly · Answer 2 · 2017-11-20T13:31:17.497

4

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

edited Nov 20 '17 at 13:31

answered Jan 29 '15 at 14:51

James Donnelly

126,410
34
208
218

Thanks, please see update to question – RunLoop Jan 29 '15 at 14:54
@RunLoop are you using the same font size? Are you using `pt` units? – James Donnelly Jan 29 '15 at 14:57
I am using px in both cases. – RunLoop Jan 29 '15 at 15:00
@RunLoop can you not simply change the font weight in the browser from Semibold to Normal? – James Donnelly Jan 29 '15 at 15:07
Unfortunately not, the regular and semibold weights appear quite differently. – RunLoop Jan 29 '15 at 15:23
Don't you mean `font-weight` instead of `font-size`? – Frederic Leitenberger Nov 20 '17 at 13:30
@FredericLeitenberger Well spotted. – James Donnelly Nov 20 '17 at 13:31

score 0 · Answer 3 · answered Jan 29 '15 at 14:51

0

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

answered Jan 29 '15 at 14:51

moeses

497
1
6
21

I think you mean "10 weights". There are only 3 different font styles! – Mr Lister Jan 29 '15 at 14:55
You're right - I meant styles because all weights have single stylesheets :) – moeses Jan 29 '15 at 15:05

score -1 · Answer 4 · answered Jan 29 '15 at 18:56

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.

Font renders thicker in browsers

4 Answers4