1802795 - Notable differences in text rendering on macOS between Firefox and Chrome/Safari

Status: RESOLVED DUPLICATE of bug 1670993

(Core :: Graphics: Text, defect, P3)

Description

[5silentrain]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:107.0) Gecko/20100101 Firefox/107.0

Steps to reproduce:

Open any YouTube video. For example this: https://www.youtube.com/watch?v=VGG5NtLrTrE
Right click on the video and select "Stats for nerds". The text will be noticeably bolder than in Chrome and Safari.
Firefox: https://i.imgur.com/ktqz2V7.png
Chrome: https://i.imgur.com/wyJ2M9L.png
Safari: https://i.imgur.com/0PM2kTg.png

This is noticeable elsewhere on YouTube as well. For example, if you click on the gear with video settings.
Firefox: https://i.imgur.com/oiKLnIL.png
Chrome: https://i.imgur.com/2DmHA7u.png
Safari: https://i.imgur.com/Jmdw7Ap.png

Open the site: https://html5test.com
On this site, on the contrary, the text in Firefox looks thinner than in Chrome and Safari.
Firefox: https://i.imgur.com/2AWH3WA.png
Chrome: https://i.imgur.com/jUqg1wL.png
Safari: https://i.imgur.com/JWE6rEf.png

Comment 1

[5silentrain]

Attachment: Firefox 1

Comment 2

[5silentrain]

Attachment: Chrome 1

Comment 3

[5silentrain]

Attachment: Safari 1

Comment 4

[5silentrain]

Attachment: Firefox 2

Comment 5

[5silentrain]

Attachment: Chrome 2

Comment 6

[5silentrain]

Attachment: Safari 2

Comment 7

[5silentrain]

Attachment: Firefox 3

Comment 8

[5silentrain]

Attachment: Chrome 3

Comment 9

[5silentrain]

Attachment: Safari 3

Comment 10

[Jonathan Kew [:jfkthame]]

It looks to me like the difference here is basically that youtube uses -webkit-font-smoothing: antialiased, which isn't supported in Firefox.

Modifying the CSS to remove that (or changing it to -webkit-font-smoothing: initial to get the default behavior) makes the text look significantly heavier, similar to Firefox.

And adding -moz-osx-font-smoothing: grayscale would make the Firefox rendering more like Safari.

Comment 11

[5silentrain]

The problem is observed not only on YouTube, but also on the website https://html5test.com. I posted screenshots above. There is no such bug in Chrome and Safari.

Comment 12

[Jonathan Kew [:jfkthame]]

In the case of https://html5test.com, the issue is that Firefox shows that text ("The HTML5 test score....") with a lighter font than Safari or Chrome, right? This is an entirely different situation from the youtube case (where the Firefox text looks heavier, due to the smoothing mode).

It appears to be a bug in those browsers, not a bug in Firefox. The site's CSS here has:

font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif;
font-weight: 200;

(specified in main.css for the <html> element).

The trouble with this is that "HelveticaNeue-Light" and "Helvetica Neue Light" are not font family names; they are the PostScript name and Full font name respectively of an individual face of the Helvetica Neue family. So in the font-family list, they should be ignored as not matching the family name of an available font. So the first font family named here that is actually available on macOS is "Helvetica Neue", and the requested font weight is 200.

This combination, font-family: "Helvetica Neue"; font-weight: 200;, actually maps to the Thin face of Helvetica Neue, not the Light face (which has weight 300). So that's what Firefox uses. It is also what Safari and Chrome use if you remove the (incorrect) "HelveticaNeue-Light" and "Helvetica Neue Light" names from the font-family list.

Given that the site apparently wants to use the Light face of Helvetica Neue, it should have specified font-weight: 300, not 200. Then the Firefox rendering would match what the other browsers are (incorrectly) producing due to their use of the (erroneous) font-family names.

A reduced example like:

data:text/html,<div style="font-family: HelveticaNeue-Light, serif">This should be the default <b>serif</b> font

demonstrates the incorrect behavior in Safari and Chrome.

Comment 13

[Jonathan Kew [:jfkthame]]

In https://bugs.webkit.org/show_bug.cgi?id=7709#c6, Myles acknowledges that the WebKit behavior of honoring PostScript names in the font-family is contrary to the spec, but it sounds like they're unwilling to fix this.

For Blink, see https://bugs.chromium.org/p/chromium/issues/detail?id=641861#c19. (A brief test suggests that Blink doesn't have this bug on Windows, but it does still show wrong behavior on macOS.)

Comment 14

[5silentrain]

I also noticed a long time ago how strange the copyright sign is displayed in Firefox 👀 Link (at the end of the video description): https://www.youtube.com/watch?v=XTqauYTg3k8
Firefox: https://i.imgur.com/vkiHL5h.png
Chrome: https://i.imgur.com/rIKlGHZ.png
Safari: https://i.imgur.com/q1GLc9r.png

The same problem with the display of the copyright sign is in Windows.

Comment 15

[5silentrain]

Attachment: Firefox (copyright sign)

Comment 16

[5silentrain]

Attachment: Chrome (copyright sign)

Comment 17

[5silentrain]

Attachment: Safari (copyright sign)

Comment 18

[Jonathan Kew [:jfkthame]]

That character isn't the standard copyright sign © (Unicode: U+00A9 COPYRIGHT SIGN); instead, they've used ⓒ (U+24D2 CIRCLED LATIN SMALL LETTER C) from the Enclosed Alphanumerics block. That's not supported by most Western fonts; it's mainly found in large CJK fonts and a few specialized technical fonts.

The youtube content is styled with font-family: "Roboto","Arial",sans-serif;, but neither Roboto nor Arial includes U+24D2, so you get whatever fallback the browser finds for it, and that is likely to vary among different browsers and platforms.

Comment 19

[5silentrain]

Maybe in this case you should follow Chrome and Safari? 🤔 So that there are no differences between the three main web browsers on the market.

Comment 20

[5silentrain]

Another notable difference in text/character rendering between Firefox and Chrome/Safari (musical note symbol): https://www.youtube.com/watch?v=QheozRjkklQ

Firefox: https://i.imgur.com/QINsQt3.png
Chrome: https://i.imgur.com/qbGDJqg.png
Safari: https://i.imgur.com/DAWfjFb.png

As you can see from the screenshots above, Chrome and Safari render text/characters in the same way, unlike Firefox.

Comment 21

[5silentrain]

Attachment: Firefox (musical note symbol)

Comment 22

[5silentrain]

Attachment: Chrome (musical note symbol)

Comment 23

[5silentrain]

Attachment: Safari (musical note symbol)

Comment 24

[5silentrain]

Even on the preview of the video itself, you can clearly see that the musical note symbol is different from what Firefox renders.

Screenshot: https://i.imgur.com/UNeMQnR.png

Comment 25

[5silentrain]

Attachment: Firefox (musical note symbol)

Comment 26

[Jonathan Kew [:jfkthame]]

This is another case of different fallback fonts being used. It looks like that is the Unicode symbol BEAMED SIXTEENTH NOTES (U+266C) from the Miscellaneous Symbols block. As that character isn't supported by the YouTube font, fallback happens. Firefox is defaulting to the Apple Symbols font here, whereas Safari and Chrome are picking the character from a Japanese font. I don't see any particular reason why a Japanese font should be chosen, though -- the content isn't tagged with lang=ja or anything like that -- so using Apple Symbols seems pretty reasonable.

There's no expectation that symbols will look the same in all fonts, or that browsers will always use the same fonts for arbitrary characters when no suitable font is specified in the CSS.

Comment 27

[5silentrain]

Maybe Google and Apple chose the character from the Japanese font because it looks better? 🤔

Comment 28

[5silentrain]

It looks to me like the difference here is basically that youtube uses -webkit-font-smoothing: antialiased, which isn't supported in Firefox.
Modifying the CSS to remove that (or changing it to -webkit-font-smoothing: initial to get the default behavior) makes the text look significantly heavier, similar to Firefox.
And adding -moz-osx-font-smoothing: grayscale would make the Firefox rendering more like Safari.

It's funny, but in the latest dev version (128.0b4), the text on YouTube in Firefox seems to have become as thin as in Chrome and Safari 😲 I hope this is a feature and not a bug 🤭 I wonder if something has changed on YouTube or if I was right after all and Firefox has finally learned how to correctly render text under macOS 🤔 Developers, please leave everything as it is 🙏

Screenshots:
Firefox 127.0: https://i.imgur.com/ITufa9e.png
Firefox Dev 128.0b4: https://i.imgur.com/wV4WlDa.png
Chrome Dev 128.0.6535.2: https://i.imgur.com/1DC2JKm.png
Safari 17.5: https://i.imgur.com/Tsn3WiK.png

Comment 29

[Jonathan Kew [:jfkthame]]

(In reply to 5silentrain from comment #28)

It looks to me like the difference here is basically that youtube uses -webkit-font-smoothing: antialiased, which isn't supported in Firefox.
Modifying the CSS to remove that (or changing it to -webkit-font-smoothing: initial to get the default behavior) makes the text look significantly heavier, similar to Firefox.
And adding -moz-osx-font-smoothing: grayscale would make the Firefox rendering more like Safari.

It's funny, but in the latest dev version (128.0b4), the text on YouTube in Firefox seems to have become as thin as in Chrome and Safari 😲 I hope this is a feature and not a bug 🤭

That'll be the result of bug 1670993, which landed for Firefox 128 a couple of weeks ago.