[Web] Unexpected leading size
Closed this issue · 27 comments
Problem description
I'm styling some button for my web apps, and noticing that the leading of this font is making the UI misalignment.
Expected behavior
The text should be centered with the icon
Screenshots
To Reproduce
https://codesandbox.io/s/vigilant-satoshi-uf1f0?file=/index.html
https://uf1f0.csb.app
Thanks for the clear and detailed issue!
Shoot, I am fairly sure this is a regression from before, as a definite goal here is to vertically center the caps.
I'll look into this and try to release a fix, ASAP.
Okay, @ng-hai, I’m looking at this on my end, but I’m not seeing quite the same thing. It’s possible that I could be seeing a different version, e.g. something picked up from my locally installed "Recursive" font, or possibly a difference in rendering between my OS and yours.
That said, font line heights are a little tricky, and I obviously believe that you’re seeing an issue. So, thanks for reporting, and I hope we’re able to drill down into what (and where) the issue is, so I can ultimately (hopefully) fix it!
Can you please tell me what OS and browser (including versions) that you are seeing the problem on?
Here’s what I have on macOS Catalina, 10.15.7 ... perhaps not exactly pixel-perfect, but about as close as I expect browsers to get:
Firefox 96 (Nightly):
Chrome 95:
Safari 13.1.3:
And, running Windows 10 in VM Ware, with Edge 89 browser:
Just as a quick check of whether the locally-installed font on my computer was throwing things off, I just checked on my phone (iOS 14 Safari):
That's weird. I'm using font source from Google Fonts. Let me check on my friend's machines.
Ok, so the problem is Safari 15.1 on my Mac :(
Thank you for supporting me. Will let you know on product launching later.
Wait, sorry, let’s keep this open until we diagnose the specific problem.
Are you saying that you didn’t see the same issue on a friend’s computer?
What version of macOS are you on? Apple changed a lot of type things (mostly for the better) in macOS 11 Big Sur. I’m a couple versions back for now (Catalina), but I could run something newer on an external SSD to better understand whether this is something I can improve!
I'm using MacOS Monterey 12.0.1 (21A559), Safari 15.1 (17612.2.9.1.20).
A fun fact that Edge 95 and Safari have the same issue, while Firefox Developer Edition works great. Maybe it's the Chromium problem.
Thanks, that context is really helpful!
Fonts include multiple, different pieces of metadata to express their line height / metrics. Different software pays attention to these differently. So, it's a bit of a nightmare to fully nail down. But, this gives me a specific target. I bet I just have to test a few changes to the metric metadata, and something should be the sweet spot to make all the browsers work well.
I'll try to look into this further today, and will make a release this week if I find a solution.
Okay, I’ve experimented a bit with this, but so far, it’s inconclusive.
Can you please screenshot what you see in the two groups of buttons here, in Safari vs Firefox?
On my end, when I test this in Safari 15.1 on a macOS Monterey, the text is misaligned a little bit, though not to the extent it is in the top screenshot of this thread. And, the Google Fonts vs Test versions seem to render the same. On Firefox (also macOS Monterey), the problem doesn’t show. But, I’m still curious whether how this might look on your end, @ng-hai.
Thanks for bearing with me in this issue!
(For my future self: in this test font, I set the winAscent equal to typo Ascender, and winDescent equal to typo Descender. It isn’t like this in the official release versions, because (I think) winAscent needs to be higher to avoid accent cropping in various Windows apps. But, I’m not sure whether it makes a difference in line heights.)
Safari 15.1
Firefox
It seems there is no issues as we're facing 😕
Shoot, I’ve realized that I had a typo in those SVGs, and they weren’t quite square. -_- I’ve adjusted them to be circles, and double-checked that they aren’t ellipses.
I also realized that it would be useful to add a third font for comparison, so I’ve added a column using Roboto. Sorry to ask again, but could you please screenshot this page? Thanks so much!
No problem :)
Safari 15.1
Firefox Developer Edition
Edge 95
Okay, thanks again for trying that and posting the screenshots!
I now can actually replicate this on my end, though it depends on zoom. At some zoom levels, the type "rounds up" to a pixel line where things are off-center. At other zoom levels, it looks perfectly centered. Roboto, meanwhile, seems to "round down" to a lower pixel, some of the time.
I’ll try to inspect Roboto a little more closely to see whether it sets metrics in a way that might cause it to look more close to the vertical center, more of the time.
I notice on that page, Roboto is being served as a static file, while Recursive is variable. But, I don’t think this should be affect line height / pixel alignment. To be continued...
Awesome, really looking forward to see upcoming release.
Just notice an interesting trick, if I use Flexbox Center, it will result this
But if I use Flexbox Stretch, the result is unexpectedly correct 😄
Huh, interesting! I think it must be that with flex stretch, both children fill the height of the container, making the icons shift up to the top, rather than being centered. So, it does align the icon and text, but the appearance in the button boundary is still off.
The icon actually stays the same, and this is the first time I use stretch for button styling, but it seems getting great result :)
Dont know why using same code but different project, the result is still mismatch
Thanks for the updates, @ng-hai! I’ve asked some smart folks, and I’m hoping someone might have a helpful suggestion. Sorry I couldn’t figure this out already, but I won’t be giving up on it!
Sorry, I haven’t forgotten about this, but I have just had many other things pop up, and no direct funding here, so it has been slightly pushed to the side.
I’ve recently updated my main computer to macOS Monterey, so this is on my mind again.
In testing, I see that the font line height is centered as intended at some font sizes / zoom levels, but not others. Normally, I’d speculate that this might indicate that the issue is something to do with font hinting. However, the Recursive variable font doesn’t have hinting, so that can’t be the issue.
It could also be an issue of how macOS renders variable vs static fonts ... I wanted to test this, so I’ve updated the CodePen page. It’s a little hard to tell for sure, but it does seem like the variable font is rendered just a bit thicker and sometimes at slightly different line heights, depending on zoom/size.
https://codepen.io/thundernixon/full/wvqNGOe
@ng-hai, if you’re still up for it, could you take a look at the codepen again and let me know if you see a difference between the left and center columns of buttons? It may be useful to zoom in/out (command - and command +), to further test it.
It looks great on every browser that I have installed 💯
Sorry, can you clarify... does the static font look great in every browser, or also the test font?
Both of them are great and look the same
Woah! I wonder if maybe Apple fixed this issue in an update between November and now. 🤔
I’ve updated the CodePen for one more question: does the GF Variable look the same to you as the GF Static and Test Font, in terms of line heights?
Yes they're all the same
Safari
Firefox Dev Edition
Chrome
Oryoki (Chrome 58) - but you should ignore it 🤣
Amazing, thanks for checking and letting me know! Ha, I love when font problems are solved by software / OSes, so I don’t have to find some kind of hack to make them work as they should.
Oryoki is interesting – I hadn’t heard about it until now, but it looks like a cool browser project! Based on your screenshot, it looks like it currently doesn’t support .woff files (the left column) or variable fonts (the middle two columns).
Darn, it looks like Oryoki hasn’t been updated in about 4 years. I wish it had more support!
Haha me too