Text vertical alignment within <button> on Firefox and Chrome when using Helvetica

Question

I am trying to style a element, and it is appearing inconsistently in Firefox and Chrome when using Helvetica font. Arial and Lucida produce identical results, though.

In Firefox (left), the text is vertically centered according to a box that wraps the text including descenders. In Chrome (right), the centering is around the top of the text to its baseline.

button {
    border: 1px solid black;
    font: 18px Helvetica;
    padding: 10px;
    background: #ddd;
}

Fiddle: http://jsfiddle.net/3wmhpb8g/7/

This is on Firefox 31 and Chrome 38 on Mac/Yosemite.

How can I make the views consistent?

Answer 1

This doesn't have anything to do with the <button> element, it's a generic issue related to the difference between how Firefox and Chromium treat font metrics embedded in font files.

You've already identified the easiest solution, which is to use Arial instead of Helvetica. Or, if you specify an actual typeface (using @font-face), then that would give you control over the actual typeface used by the browser (not just the font name) and then you could specify a web font that you know to render consistently across browsers.

Alternately (and this would be a hack, but it's up to you) you could use a CSS rule to target Firefox and use different padding depending on the browser, and then you could still use font-family: Helvetica. But, test thoroughly. Because there are so many licensed/unlicensed/mock versions of Helvetica and Helvetica Neue kicking around, simply specifying font-family: Helvetica leaves it up to whatever Helvetica font each person's Mac/Linux/Windows/Android/iOS device has installed, which is likely to be a crapshoot.

I'm not the arbiter for which browser is "correct" but based on this discussion it appears that it's Firefox, they've implemented full font metrics whereas Chromium ignores them. Here's a related question.

Again, the font metrics are a feature of the typeface itself, so if you're specifying an .otf or .ttf font using @font-face, you gain control over this. See this thread, you can edit the font and change the "Really use typo metrics" flag of the font file. That's the "right" solution, but it only works if you want to serve your own font files. If not, just specify a font that renders the same across browsers.