Join the Mozilla’s Test Days event from Dec 2–8 to test the new Firefox address bar on Firefox Beta 134 and get a chance to win Mozilla swag vouchers! 🎁

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Font rendering in Mac

  • 1 reply
  • 1 has this problem
  • 12 views
  • Last reply by guigs

more options

When I recently worked with Museo Sans Condensed from Typekit I realized that it looks very different across browsers, apps and OSes.

The biggest difference appears in Chrome and Firefox on Mac, where the font is rendered too bold. Also Sketch on Mac does the same. In Safari on the other hand the font looks "normal". I've prepared a little overview which showcases the differences with Museo Sans Condensed 900 in various environments: https://db.tt/emolAObK

If you look at the Windows browsers, or Photoshop or Affinity Designer, it looks (probably as intended) slightly less bold.

I've googled a bit and then and realized that the difference in Chrome and Mozilla on the Mac can be "switched off" by using "-webkit-font-smoothing: antialiased" and "-moz-osx-font-smoothing: grayscale" - then the rendering looks almost the same in all the browser, no matter if Mac over Windows. The problem in Sketch still appears however (I've already contacted their support for a statement).

So, the questions is now what the best thing to do is? Leave everything in its initial state and let every app/browser/OS render it differently? But then again, you can never be sure that the font looks the same everywhere. That's especially an issue with slightly lighter fonts, as Museo Sans 300 (not Condensed), which looks quite perfect in Sketch and in Chrome/Firefox on Mac, but is almost a little bit too thin in the rest of the world's apps.Also if you use the font on a darf background with light text. How can I design something, especially on the Mac, if things look so different here, so much different than in the wealth of all other devices, because even on iOS the font looks "normal" and not too bold.

What would you suggest - what would be your approach? Some clarification would be really appreciated.

When I recently worked with Museo Sans Condensed from Typekit I realized that it looks very different across browsers, apps and OSes. The biggest difference appears in Chrome and Firefox on Mac, where the font is rendered too bold. Also Sketch on Mac does the same. In Safari on the other hand the font looks "normal". I've prepared a little overview which showcases the differences with Museo Sans Condensed 900 in various environments: https://db.tt/emolAObK If you look at the Windows browsers, or Photoshop or Affinity Designer, it looks (probably as intended) slightly less bold. I've googled a bit and then and realized that the difference in Chrome and Mozilla on the Mac can be "switched off" by using "-webkit-font-smoothing: antialiased" and "-moz-osx-font-smoothing: grayscale" - then the rendering looks almost the same in all the browser, no matter if Mac over Windows. The problem in Sketch still appears however (I've already contacted their support for a statement). So, the questions is now what the best thing to do is? Leave everything in its initial state and let every app/browser/OS render it differently? But then again, you can never be sure that the font looks the same everywhere. That's especially an issue with slightly lighter fonts, as Museo Sans 300 (not Condensed), which looks quite perfect in Sketch and in Chrome/Firefox on Mac, but is almost a little bit too thin in the rest of the world's apps.Also if you use the font on a darf background with light text. How can I design something, especially on the Mac, if things look so different here, so much different than in the wealth of all other devices, because even on iOS the font looks "normal" and not too bold. What would you suggest - what would be your approach? Some clarification would be really appreciated.

All Replies (1)

more options

I understand that you have created many scales for how a particular font, Museo Sans Condensed from Typekit is rendered on different devices, operating systems, and browsers. I also understand the biggest difference appears in Chrome and Firefox on Mac, where the font is rendered too bold.

Fonts are loaded from the local font type installed on the user's computer. I would suggest asking stackoverflow.com for a more immediate solution to this. However there is Layout: Text component in bugzilla.mozilla.org for further investigation on the css. This is where we can provide support for using Firefox and its basic features.


Other insights: