Skip to main content
aaronffx
aaronffx
Participant
July 17, 2020
Answered

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

  • July 17, 2020
  • 2 replies
  • 9164 views

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.

 

 

 

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?

    Correct answer aaronffx

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

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

     

    2 replies

    K
    ktotten2
    Participant
    October 19, 2020

    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/

     

      O
      Oskar5D50
      Participant
      November 22, 2023

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

        aaronffx
        aaronffxAuthorCorrect answer
        Participant
        July 17, 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;
}

         

          Rishabh_Tiwari
          Community Manager
          Rishabh_TiwariCommunity Manager
          Community Manager
          July 17, 2020

          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

          K
          ktotten2
          Participant
          October 19, 2020

          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/

            Terms & ConditionsAccessibility statement
            Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices