Text position is higher in its bounding box on Firefox vs. other browsers

Question

I've built a layout for a list of items, and I'm running into some line rendering discrepancies between Firefox and other browsers, specifically with my custom font . Firefox renders the text above where I'd expect the baseline to be within the line height.

Firefox rendering:

... while Chrome seems to be putting the text lower in the bounding box.

Chrome rendering:

I'm aware that Firefox & Chromium browsers have different default line heights, so I've set this explicitly. The lines are the same height to the pixel between browsers (26.88px), but the text is positioned differently within them.

You can see that I've adjusted the top padding to be smaller, which looks how I intend on Chrome; if I make the top & bottom padding equal, the text renders closer to an apparent vertical center on Firefox, but lands too low in Chrome.

Is there a way to address this, without doing browser-specific padding values? This is the site in question, the styling for this component can be found here , and my font-face definitions can be found here . Thanks for your help!

Answer 1

I ran my font files through the Font Squirrel Webfont Generator optimization, and this fixed up my vertical metrics, Using the Font Squirrel edit. I no longer need to apply different padding values to achieve a vertically centered appearance on Chrome.

That said, the optimized fonts are still rendering higher within the line height in Firefox. This is the case even when I'm using the default font instead of my custom font:

I think this means Firefox is just eccentric, and must be special-cased accordingly. Here's my CSS, which achieves approximately the same appearance in Chrome & Firefox:

.project-row {
    padding: 0.7em;
}

/* appear vertically centered in Firefox */
@supports (-moz-appearance: none) {
    .project-row {
        padding-top: 0.75em;
        padding-bottom: 0.65em;
    }
}

It'll do. Please holler if you have any better ideas, and until then, this is the answer!