jpt/barlow

Not vertically centered

Opened this issue · 8 comments

lowderdev commented

My team is using this font in a web app and I noticed I couldn't vertically align icons with the text. I eventually realized it was the font itself.

Switching between Arial and Barlow:
font-weird

After some googling I found this twitter thread:

https://twitter.com/jocelyncaronfr/status/1194205393553121286

Jocelyn Caron @jocelyncaronfr
Hey Jeremy, I discovered Barlow font, it's beautiful. It's shame, i can't use this for my new design app, it's not centered vertically
image

https://twitter.com/jeremytribby/status/1194712659116998656

Jeremy Tribby @jeremytribby
@jocelyncaronfr are you unable to apply a negative margin in your UI? the extra space there is to make sure vietnamese characters don't get clipped by default.

We are hesitant to add negative margin to our components to vertically center as Jeremy suggests because if we ever change fonts we'll have 1px offsets everywhere adding a bunch of technical debt.

Pardon my ignorance about fonts, but is it possible to have equal margin on both sides and still support Vietnamese? Otherwise is it possible to have a variant that supports equal margin?

Thanks in advance!

jpt commented

I'll take a look at the vertical metrics to see if anything is wrong. Adding to my TODOs.

  • 👍1
jpt commented

I have fixed this with these metrics in the 1.5 branch https://github.com/jpt/barlow/tree/1.5

typoAscender, hheaAscender: 950.0
typoDescender, hheaDescender: -250.0
winAscent: 1348.0
winDescent: 235.0
typoLineGap: 0
hheaLineGap 0

I may need to add some uniform padding to top and bottom to match the previous release in Google Fonts, so that the line height doesn't change. I will check.

  • 🎉1
lowderdev commented

Wow that's great to hear! I really appreciate it. I'll try and see if the things vertically align with 1.5

jpt commented

I've generated some binaries, let me know if this solves it: https://github.com/jpt/barlow/tree/1.5/fonts

if it does, I may still change vertical metrics between now and release of 1.5, but that's the general approach I'd use (centering on captial letters)

  • 👍1
MattiaMarchiorato commented

Hello @jpt, we love Barlow!
Do you have any news about release in Google Fonts the 1.5?

  • 👍1
applecuckoo commented

@Mattia-Marchiorato Seems like this isn't even close to ready, I love this font too but it seems @jpt is busy with other projects telling by his GH activity.

MattiaMarchiorato commented

@applecuckoo so sad 😔

  • 👍1
  • 😕1
jpt commented

take a look at https://github.com/jpt/barlow/archive/refs/heads/1.5.zip
does that fix the issue?

  • ❤️1