On: System Font Stack

[bufferoverflow]

It's not even about being pixel perfect. I can't vertically align text with an image. If I align it with one font, the other one is misaligned. I need something like media query for fonts.

[kevin_thibedeau → bufferoverflow]

You just need flexbox or construct an SVG. Let the divs size themselves to the font and allow the browser to put them where they're told to go.

[bufferoverflow → kevin_thibedeau]

I don't see how flexbox solves this problem. Just because you vertically center text, doesn't mean that the visible text is actually centered. It depends on the font.

[bufferoverflow → kevin_thibedeau]

Here's an example:

https://jsfiddle.net/a3q87ucs/

[saadat → bufferoverflow]

The CSS property leading-trim [1][2] is designed to solve this alignment problem (among others). However, it's still at the Working Draft stage, so it's going to take a while before browsers start supporting it.

[1]: https://www.w3.org/TR/css-inline-3/#leading-trim [2]: https://medium.com/microsoft-design/leading-trim-the-future-...