Q:

Why does Firefox render sans-serif text without "top" spacing?

I have a simple <a class="button"> element, and I noticed on Firefox, the text wasn't as vertically aligned as on Chrome.
Here is my CSS:
body {
  font-family: sans-serif;
  font-size: 36px;

  padding: 1em;

  color: #333;
  background-color: #f6f6f6;
}

.button {
  font-size: 2em;

  display: inline-block;

  margin: 10px 0;
  padding: 0.6em 1em;

  text-align: center;
  text-decoration: none;
  text-transform: uppercase;

  color: #333333;
  background-color: #a3e7fc;
}
.button:hover {
  background-color: #a5eaff;
}
.button:active {
  background-color: #9bdcef;
}

Pretty basic. Here is a codepen so you can view it in your browser: http://codepen.io/romellem/pen/GoazbW
Now what I'm not sure, is why Firefox is rendering the text so poorly. That is, it is putting a lot of space beneath the text, but not a lot above it.
Here are some screenshots:
Firefox:

Chrome:

Searching around, I wasn't able to find much reading material on the subject.
Anyone have any ideas why Firefox renders text with space at the bottom, but not at the top? Thanks.
NOTE: I am running Mac OS X Yosemite (10.10.5).

A:

Figured it out. When putting font-family: sans-serif;, Chrome will choose Helvetica Neue, whereas Firefox will choose plain Helvetica. That difference of space is in the font files themselves.
Explicitly declaring
body {
  font-family: "Helvetica Neue", sans-serif;
}

instead "fixes" the issue on Firefox, aka, makes it so FF and Chrome will use Helvetica Neue as the render font (assuming it is available).

