Vertical alignment issue with flexbox

[cristatus]

Describe the bug Text is not perfectly aligned vertically with flexbox.

To Reproduce Steps to reproduce the behavior:

1. set display: flex on the text container
2. set align-items: center on the text container

Expected behavior The text should align to the center of the container. Instead it's a little off center.

Screenshots

Environment

• OS: Arch Linux (GNOME 45.2)
• Chrome Latest
• Inter Regular 3.19

[tylermcgowan]

I think this is as expected. The middle of glyphs are rarely geometrically centered, but rather optically. If the crossbar of the E and the joins of the B and 3 were dead center, they would optically look too low.

If the space above and below the cap height and baseline is equal, then it's centering properly in the flex container, which it looks to be.

https://ohnotype.co/blog/ohno-type-school-e

[rsms]

@tylermcgowan you are correct, thank you.

@cristatus Two things to keep in mind:

1. To check for vertical alignment, measure the space above the cap height and below the baseline (not some point in between.)
2. Some web browsers will (IMHO incorrectly) round the baseline to CSS "px" which on a high-density display like a MacBook is often 2 pixels, meaning that you might see an off-by-one pixel issue in some web browsers but not in others. This is simply an unfortunate "feature" of some web browsers.

[cristatus]

@tylermcgowan thanks for explanation.

@rsms Inter is now my default UI fonts. I saw this inconsistency with some web apps I use when compared to other notable fonts, especially with "Noto". So I thought it might be an issue.

Anyway, thanks for the great fonts!