Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Not vertically centered #70

Open
lowderdev opened this issue Mar 11, 2021 · 9 comments
Open

Not vertically centered #70

lowderdev opened this issue Mar 11, 2021 · 9 comments

Comments

@lowderdev
Copy link

lowderdev commented Mar 11, 2021

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 lowderdev changed the title Text not vertically centered (due to Vietnamese support?) Not vertically centered Mar 11, 2021
@jpt
Copy link
Owner

jpt commented Sep 22, 2021

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

@jpt
Copy link
Owner

jpt commented Oct 19, 2021

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.

@lowderdev
Copy link
Author

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

@jpt
Copy link
Owner

jpt commented Oct 21, 2021

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 jpt added this to the Barlow 1.5 milestone Nov 27, 2021
@MattiaMarchiorato
Copy link

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

@applecuckoo
Copy link

@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
Copy link

@applecuckoo so sad 😔

@jpt
Copy link
Owner

jpt commented Apr 22, 2024

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

@jpt jpt mentioned this issue Apr 24, 2024
@54nn0n
Copy link

54nn0n commented Feb 4, 2025

@jpt's comment definitely fixes it! Would this fix also be possible on the Mono font? 🙏

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants