Die Funktionalität dieser Website ist durch Wartungsarbeiten eingeschränkt, die Ihr Erlebnis verbessern sollen. Wenn ein Artikel Ihr Problem nicht löst und Sie eine Frage stellen möchten, können Sie unsere Gemeinschaft über @FirefoxSupport auf Twitter, /r/firefox oder Reddit fragen.

Hilfe durchsuchen

Vorsicht vor Support-Betrug: Wir fordern Sie niemals auf, eine Telefonnummer anzurufen, eine SMS an eine Telefonnummer zu senden oder persönliche Daten preiszugeben. Bitte melden Sie verdächtige Aktivitäten über die Funktion „Missbrauch melden“.

Weitere Informationen

Font rendering in Mac

  • 1 Antwort
  • 1 hat dieses Problem
  • 12 Aufrufe
  • Letzte Antwort von 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.

Alle Antworten (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: