1527735 - Generic `sans-serif` font family on macOS leads to different line-box than assigned “Helvetica Neue”

Status: RESOLVED INVALID

(Core :: Layout: Text and Fonts, defect)

Description

[Volker E.]

Attachment: T216070 macOS Firefox - sans-serif vs "Helvetica Neue" 2019-02-13.png

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

Steps to reproduce:

When an element is assigned sans-serif on macOS, Firefox is using “Helvetica Neue” as font if not specified differently by the user.
Firefox uses a different line-box though for sans-serif than other browsers on macOS with sans-serif or when defining Helvetica Neue as font-family.

Background: This has been uncovered in work on Wikimedia's main user-interface library OOUI. We rely on sans-serif due to cross-browser and multilanguage support needs and current Firefox rendering results in unwanted UI glitch.

Actual results:

See https://codepen.io/Volker_E/pen/JxBqLQ for a reduced code example.

Expected results:

The line-box for sans-serif should be corrected to align with “Helvetica Neue” and other browers.

Comment 1

[Gyula Palko[:gpalko]]

Adding the component in order to involve the development team in reviewing this issue.

Comment 2

[Jonathan Kew [:jfkthame]]

See https://codepen.io/Volker_E/pen/JxBqLQ for a reduced code example.

If I view this example on macOS, I see a discrepancy like in the screenshot.

However, the reason for this is that by default, sans-serif maps to Helvetica (not Helvetica Neue) on macOS; at least, that's what is set in the default prefs.[1] As such, there's no expectation that a button formatted with Helvetica Neue will exactly match one using sans-serif.

If I modify the example to specify Helvetica for the right-hand button, it matches the left-hand one; or if I modify the font prefs to use Helvetica Neue for sans-serif, they also match.

So AFAICS there's no bug here; these are two different fonts and they have slightly different line-spacing metrics and baseline alignment.

[1] https://searchfox.org/mozilla-central/rev/ee40541496d3ad738097eebadaf4965ca1343b7a/modules/libpref/init/all.js#4232

Comment 3

[Volker E.]

Attachment: Safari Helvetica sans-serif vs 'Helvetica Neue'

Comment 4

[Volker E.]

Thanks for the pointer.
A follow-up question would be what the reasons behind why the line-box rendering is still so different from Safari then. See 2nd attachment. Safari's vertical alignment seems acceptable, Firefox' not.