Font renders thicker in browsers

css browser fonts adobe-illustrator
RunLoop picture RunLoop · Jan 29, 2015 · Viewed 7.3k times · Source

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)

Answer

RunLoop picture RunLoop · Jan 30, 2015

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;

Related questions

How can I determine what font a browser is actually using to render some text?

My CSS specifies "font-family: Helvetica, Arial, sans-serif;" for the whole page. It looks like Verdana is being used instead on some parts. I would like to be able to verify this. I've tried copying and pasting from my browser into …

Read More
How can I convert OTF/TTF files to EOT format?

I need to use @font-face feature and my fonts are in OTF/TTF format and Microsoft browsers support only EOT format. I tried to use Microsoft tool WEFT, but it didn't work or I didn't understand how it works. Is …

Read More
list every font a user's browser can display

Is there a way in javascript to obtain the names of all fonts (or font-families) that the browser can show? (I want to give the user a dropdown with a list of all available fonts, and allow the user to …

Read More