Font weights appearing heavier in browser (chrome and safari) then in Xd

[aaronffx]

Hi there, I am noticing very major differences in font weight between Xd and my web browsers.

Please look at the attached examples to understand how bad this looks.

Xd on left, Chrome on right.

Xd on left, Safari on right.

In the browser, both fonts appear to be bold, when they are just referencing the regular weight.

The Playfair Display is the large heading, and and Georgia is the remainder.

Georgia is just being used as it is installed with Microsoft Windows or Office.

We tried PT Serif instead of Georgia, loading in with Google Fonts and then Adobe fonts, and the same issue occurs.

Any ideas on how to fix this?

[aaronffx · Accepted solution]

I found a solution, put the following in your body tag in your html.

body {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

[Rishabh_Tiwari]

Hi Aaron,

Glad to hear that you were able to solve it! Thanks for sharing the solution, I am sure it will help other users. Feel free to reach out to us in case if you have any other questions or issues in the future.

Regards

Rishabh

[ktotten2]

Sorry, but that is not an acceptable solution. A better solution would be the ability to *disable* font smoothing within the XD tool, either as a global setting or per document. 

Applying font smoothing can cause usability issues: https://usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/

[Alex – Post Projects]

This is huge. Chrome fat font was bugging me for weeks. Mandatory for every project.

[ktotten2]

Sorry, but that is not an acceptable solution. A better solution would be the ability to *disable* font smoothing within the XD tool, either as a global setting or per document. 

Applying font smoothing can cause usability issues: https://usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/

[Oskar5D50]

As a designer and font creator I also want to weigh in on the "acessability" issue here. In many cases when we use webfonts as designers (in programs like Figma) we see the correct way that the fonts are ment to look like. Same for images from websites that sell fonts (as showen in this article). I think that it is incorrect to talk about this from a accesability issue and focus on the way that the designers intended the fonts to look like. If you are using a display font with very thin lines, they should render in thin lines (and you should use the correct font rendering for your web project). Maybe not the best font to use from an accesabilty perspective, but it is the "correct" way that the font should look like..