493583 - Helvetica, Times positioned wrong on firefox/mac

Status: UNCONFIRMED

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

Description

[Adam Hooper]

User-Agent:       Mozilla/5.0 (X11; U; Linux i686; en; rv:1.9.0.10) Gecko/20080528 Epiphany/2.22 Firefox/3.0
Build Identifier: 

As explained (but apparently never bugrepped) on http://monc.se/kitchen/99/beware-of-helvetica-and-times

On Mac OS X 10.5.6, the "Helvetica" font is rendered using the wrong measurements. Firefox is not counting diacritics as part of the font.

This bug makes vertical centering of Helvetica unacceptable on Firefox/mac.

Safari has no problem.

Reproducible: Always

Comment 1

[Adam Hooper]

Attachment: Vertical centering of Helvetica vs. Helvetica Neue.

Comment 2

[Adam Hooper]

Attachment: Rendering of Helvetica vs. Helvetica Neue on OS X 10.5.6

Comment 3

[Kevin Brosnan]

Make sure you don't have any corrupt fonts in the Helvetica family. http://docs.info.apple.com/article.html?path=FontBook/2.0/en/fb1003.html

Comment 4

[Adam Hooper]

Both Helvetica and Helvetica Neue validate.

As suggested at http://monc.se/kitchen/99/beware-of-helvetica-and-times (which is written by somebody who is not me, two years ago) and subsequent comments, this is a very common issue. Certainly every Mac in our office (of over a dozen Macs) shows the same vertical alignment problem.

Comment 5

[philippe (part-time)]

Note that Safari has some hack code to make Helvetica and Times mimic the font-metrics of Arial and Times New Roman respectively. So the comparison  doesn't really work.

http://lists.w3.org/Archives/Public/www-style/2008Jan/0330.html

Comment 7

[Jonathan Kew [:jfkthame]]

(In reply to comment #2)
> Created attachment 378085 [details]
> Rendering of Helvetica vs. Helvetica Neue on OS X 10.5.6

It is to be expected that Helvetica and Helvetica Neue will exhibit different metrics/vertical positioning: the font metrics provided in the fonts themselves are not the same. Dumping relevant fields from the 'head', 'hhea', and 'OS/2' tables of the two fonts shows this. Note that the two fonts use different unitsPerEm values and therefore the other metrics are not directly comparable; to account for this, I have annotated the raw values in the fonts with the scaled result for a 16-pixel size.

Helvetica:
headTable
	unitsPerEm="2048"
hheaTable
	ascender="1577"  ->  12.32px
	descender="-471"  ->  3.68px
	lineGap="0"  ->  0px
OS_2Table
	sTypoAscender value="1536"  ->  12px
	sTypoDescender value="-348"  ->  2.72px
	sTypoLineGap value="61"  ->  0.48px
	usWinAscent value="1946"  ->  15.20px
	usWinDescent value="461"  ->  3.60px

Helvetica Neue:
headTable
	unitsPerEm="1000"
hheaTable
	ascender="952"  ->  15.23px
	descender="-213"  ->  3.41px
	lineGap="28"  ->  0.45px
OS_2Table
	sTypoAscender value="952"  ->  15.23px
	sTypoDescender value="-215"  ->  3.44px
	sTypoLineGap value="55"  ->  0.88px
	usWinAscent value="952"  ->  15.23px
	usWinDescent value="213"  ->  3.41px

Without re-reading the relevant code, I don't remember exactly which metrics Firefox is using (the most logical would probably be the sTypoAscender/Descender/LineGap values), but it's clear that the two fonts do not have the same line-spacing metrics.

Comment 8

[Adam Vogel]

Attachment: helvetica comparison on mac browsers

I made an example of this issue, showing Helvetica rendered on mac chrome, safari, firefox, and opera, and Arial ff4/winxp for reference.

I believe confirms that firefox & opera on mac may be "correctly" rendering Helvetica based on the actual font metrics, and chrome & safari are fudging it to be close to Arial. Even so, this amount of discrepancy between browsers is a real problem web designers, especially since the "Helvetica, Arial, sans-serif" font stack is used so often.

example html: http://dl.dropbox.com/u/6667264/test-font.html

Comment 9

[crabb1d]

Are you aware that 8 years on, this is still a bug that has not been fixed.

It's not just on Mac either, it's linux too, at least on Ubuntu 16.04 (Gnome).

Example: https://i.stack.imgur.com/52Vft.png
Fiddle: https://jsfiddle.net/ob382a1p/

I have actually opened this problem as a StackOverflow question: https://stackoverflow.com/questions/45985699/how-to-fix-mis-aligned-characters-in-linux-osx-firefox-when-using-helvetica

Is anyone actually ever going to get around to fixing this?

Comment 10

[bdlowery2]

It's been 13 years and I can confirm this is still happening. Chrome on macOS has everything looking fine. Firefox on macOS has Helvetica misaligned. Can we get this fixed? It's impossible to properly align Helvetica with anything in Firefox, even when the CSS is correct.

Firefox:
https://i.imgur.com/Pwvh1WG.png

Chrome:
https://i.imgur.com/5QPbquJ.png

Notice how the firefox version has the font incorrectly aligned to the very top of the box.