These rendering differences also impact vertical alignment with specific fonts, which will absolutely drive you mad if you're trying to troubleshoot.
Take a look at Github's redesign in Firefox. Button and icon alignment are generally off by 1-2px everywhere because of it. Guessing they're just living with it because Firefox is down in the single-digit percentages of browsershare these days.
It's important to keep in mind that the bitmap output of various font rasterizers isn't universally the same. If you're designing websites expecting text nodes to have the exact same dimensions, you're making a critical mistake.
Yes different fonts have different dimensions, but I'm talking about the same font across different browsers. The issue is that Firefox and Webkit render the baseline of some fonts with a 1-2px difference.
It's impossible to vertically align Helvetica consistently in Firefox and Chrome without some browser-specific adjustments, but Arial works fine.
I am, too. The same font rendered by Core Text, FreeType, and Direct2D/DirectWrite will not have the exact same dimensions every time despite coming from the same exact file.
Say I render a font with no anti-aliasing on an embedded device, because it's marginally more expensive to do so. If I did anti-alias it, you have to account for possibly growing the bitmap size to do so. If I did, am I no longer compliant with web standards? No, because the web standards don't specify dimension requirements for text nodes from source fonts.
Further, there are multiple different types of ways to anti-alias. Should the web standards dictate how?
The annoying aspect to me isn't the change in dimensions, but the inaccurate baselines. If we could reliably align text based on its baseline it wouldn't be an issue. "align-items: baseline" would be brilliant if it actually worked cross-browser.
It's pretty telling that Github doesn't even bother to solve the issue in their redesign, they've seemed to write off Firefox text alignment idiosyncrasies.
It would have been great had I known details like this much earlier in my career, but when people talked then about "pixel perfect" designs, I don't think most people understood then what sacrifices you have to make to do so! Box size calculations should be the same, I think, surely. But text specifically has no such requirements for equal precision.
In truth, that type of work would require you to know the output sizes across every supported browser.
Take a look at Github's redesign in Firefox. Button and icon alignment are generally off by 1-2px everywhere because of it. Guessing they're just living with it because Firefox is down in the single-digit percentages of browsershare these days.