• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
1

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

New Here ,
Jul 16, 2020 Jul 16, 2020

Copy link to clipboard

Copied

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, Chrome on right.

 

Xd on left, Safari 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?

TOPICS
Design

Views

6.1K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

New Here , Jul 16, 2020 Jul 16, 2020

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

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

 

Votes

Translate

Translate
New Here ,
Jul 16, 2020 Jul 16, 2020

Copy link to clipboard

Copied

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

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

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Jul 17, 2020 Jul 17, 2020

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Oct 19, 2020 Oct 19, 2020

Copy link to clipboard

Copied

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/

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Aug 26, 2023 Aug 26, 2023

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Oct 19, 2020 Oct 19, 2020

Copy link to clipboard

Copied

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/

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Nov 22, 2023 Nov 22, 2023

Copy link to clipboard

Copied

LATEST

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..

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines