Text vertical alignment within

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.

Firefox rendering Chrome rendering

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?

Thank you, but that still looks the same as it did before in both my browsers. I'm on Firefox 33 and Chrome 38 on Mac (Yosemite). — Grandpa, Nov 09 '14 at 16:49
Lines up for me nearly the same configuration. Lucida is my default font if not specified — Christina, Nov 09 '14 at 16:56
possible duplicate of [Remove extra button spacing/padding in Firefox](http://stackoverflow.com/questions/5517744/remove-extra-button-spacing-padding-in-firefox) — Mr Lister, Nov 09 '14 at 16:59
Aha! The font does make a difference. With Helvetica (my default), they are inconsistent, but with Arial or Lucida, they look identical. Helvetica example: http://jsfiddle.net/3wmhpb8g/7/ — Grandpa, Nov 09 '14 at 17:42
Even Bootstrap's buttons don't look the same in Chrome and Firefox, but they are very close. http://getbootstrap.com/css/#buttons — Christina, Nov 09 '14 at 18:49

score 4 · Accepted Answer · answered Aug 22 '20 at 14:45

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.

I just noticed recently the problem. Wondering if this problem is not going back and forth depending on FF versions. Will just remove my default font family and embed a font that renders correctly on all browsers. It's a lost 20KB for first paint but well .. consistency is paramount — Maxence, Aug 08 '21 at 23:38

Text vertical alignment within on Firefox and Chrome when using Helvetica

1 Answers1

Text vertical alignment within