barlow icon indicating copy to clipboard operation
barlow copied to clipboard

Not vertically centered

Open lowderdev opened this issue 3 years ago • 8 comments

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!

lowderdev avatar Mar 11 '21 16:03 lowderdev

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

jpt avatar Sep 22 '21 06:09 jpt

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.

jpt avatar Oct 19 '21 04:10 jpt

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

lowderdev avatar Oct 21 '21 01:10 lowderdev

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)

jpt avatar Oct 21 '21 05:10 jpt

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

MattiaMarchiorato avatar Nov 24 '22 09:11 MattiaMarchiorato

@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.

applecuckoo avatar Dec 01 '22 03:12 applecuckoo

@applecuckoo so sad 😔

MattiaMarchiorato avatar Dec 01 '22 08:12 MattiaMarchiorato