Join us and the lead editor of IRL, Mozilla's multi-award-winning podcast, for a behind-the-scenes look at the pod and to contribute your ideas for the next season, themed: "AI and ME." Mark your calendar and join our Community Call on Wednesday, Aug 7, 17:00–17:45 UTC. See you there!

Tìm kiếm hỗ trợ

Tránh các lừa đảo về hỗ trợ. Chúng tôi sẽ không bao giờ yêu cầu bạn gọi hoặc nhắn tin đến số điện thoại hoặc chia sẻ thông tin cá nhân. Vui lòng báo cáo hoạt động đáng ngờ bằng cách sử dụng tùy chọn "Báo cáo lạm dụng".

Tìm hiểu thêm

Font rendering in Mac

  • 1 trả lời
  • 1 gặp vấn đề này
  • 12 lượt xem
  • Trả lời mới nhất được viết bởi 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.

Tất cả các câu trả lời (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: