Fonts is not vertically centered

[indaviande]

I've noticed that all buttons are misaligned because the font itself is not vertically centered.
If I switch to another font, the issue disappear.

You can better see it on Firefox.

[emmamarichal]

Hello @indaviande, thanks for the report.
I understand the problem, and we usually set the fonts so they are centered, but in that case, the font is already online and served by a lot of websites. So we can't modify the vertical metrics because it would break a lot of websites layouts.

[bettergui]

We are actually open for correcting the vertical metrics so that future users like indaviande can have it work out of the box. I also learnt that present users who are active tend to be able to fix this easily, while inactive users such as ones who used Google Fonts in Figma won't be impacted because Figma cached the layouts. What that works @emmamarichal ?

[emmamarichal]

Yes I understand, but the font is served almost 10million time and featured on 19000 websites. I would not take the risk to change anything here, even if it's for a better result. It's the inconvenient of fonts served on an API, we can't make any big change without consequences, the rest of my team will not validate this too, I'm very sorry.

[ActionWolfMedia]

@bettergui @emmamarichal - I'm running into the same issue as @indaviande - would you be able to offer any insights on possible ways to fix this? (Really keen to use Darker Grotesque as the style fits the project perfectly) - would it be permissible / feasible to edit the font file using FontForge or something similar? If so, could you advise which values to adjust to get it vertically centred?

[emmamarichal]

Hi @ActionWolfMedia!
Here you can find some nice tutorial about how calculate v-metrics so the caps are centered:

https://googlefonts.github.io/gf-guide/metrics.html#1-calculating-the-vertical-metrics-for-a-new-family

To sum up, you need to do this:
[(UPM * 1.3 - CapsHeight) / 2] + CapsHeight

Or if you already have TypoAscender and TypoDescender values:
[((TypoAsc+TypoDesc) - CapsHeight) / 2] + CapsHeight

Current case:

typoAscender = 1060
typoDescender = -296
typoLineGap = 0
hheaAscender = 1060
hheaDescender = -296
hheaLineGap = 0

Caps height: 563

(1060 + 296) - 563 = 793
793/2 = 396,5
563 + 396,5 = 959,5

So, new values are:

typoAscender = 960
typoDescender = -396
typoLineGap = 0
hheaAscender = 960
hheaDescender = -396
hheaLineGap = 0

[emmamarichal]

You can do this, re-export the fonts locally, but we can't push these changes on the API unfortunately

[ActionWolfMedia]

@emmamarichal - Thanks for your help - much appreciated.
Please pardon my ignorance, as I'm not a type expert....it's not just the caps though that aren't vertically centred, it's the whole font. Would the above values fix the issue for the whole font, or just caps?

[emmamarichal]

This new values remove some space above, and add some below, that should balance all the font better. We usually follow the caps values, because a lot of buttons are composed full caps. Please make a test with these new values, you will that it is much better!

[ActionWolfMedia]

OK, great, thank you. Would you be able to suggest the best way of implementing those value changes? (i.e. is there a programme / platform you'd recommend to use?) - again, not really a font expert, so any guidance there would be really helpful :)

[emmamarichal]

I can see if I have the time to do a quick hotfix directly on binaries

[emmamarichal]

#10

[ActionWolfMedia]

@emmamarichal - amazing, thank you!

[ActionWolfMedia]

#10

@emmamarichal - Sorry to pester you again - would it be easy for you to add a TTF, WOFF & WOFF2 version of the caps centred font in Regular and SemiBold? (I'm adding to a Shopify project, which makes it quite difficult to use a variable weight font)?

[yellow-type-foundry]

Hi @ActionWolfMedia and @emmamarichal, thank you all for bringing this up. We are the authors of the font and we have plans to do a design overhaul (engineering included) for all of our fonts on GF. So rest assured that we will address this error in the upcoming update.
Thank you again for using our fonts and we are sorry if there has been any inconvenience!

[emmamarichal]

Hi @yellow-type-foundry! Thank you for the update :)
However, as I said above, v-metrics aren't something we can change unfortunately, that why I sent you a PR with a version of the font that can be only downloaded from the repo (with the caps centered). It's a bit longer to update the statics @ActionWolfMedia, you can't use the variable font?

[ActionWolfMedia]

Hi @emmamarichal - thanks for the reply - I've managed to get the variable font working now :) Thanks though, and look forward to the upcoming update that @yellow-type-foundry mentioned. Appreciate the support