Highlighted

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

New Here ,
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?

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

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

 

TOPICS
Design

Views

149

Likes

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

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

New Here ,
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?

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

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

 

TOPICS
Design

Views

150

Likes

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
Jul 16, 2020 0
New Here ,
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;
}

 

Likes

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
Reply
Loading...
Jul 16, 2020 2
Adobe Employee ,
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

Likes

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
Reply
Loading...
Jul 17, 2020 0
ktotten2 LATEST
New Here ,
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/

Likes

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
Reply
Loading...
Oct 19, 2020 0
New Here ,
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/

 

Likes

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
Reply
Loading...
Oct 19, 2020 0