Vertical centre

Glyphs
1

Hello,

I’m developing a custom font for a client and they have started to implement it on a website. Using Figma, the client is using the type for headlines / body text etc… However they have asked if there is a way to vertically centre the type inside of buttons (much like the way they are handled on the categories / tags on this site.

After some personal testing, I can centre the type by adjusting the Ascender / sTypoAscender / usWinAscent (which shifts everything down), but I’m just curious if there are any benefits / disadvantages in doing it this way?

My typical / current metrics setup has been done following your tutorial, however when it comes to centring I’m not sure what is the best approach, has anybody had this centreing request in the past? How would you recommend solving it?

Thanks legends!

2 Likes
2

I strongly recommend the Webfont Strategy laid out in the Vertical Metrics tutorial (see the Learn section of this website).

In short: winAscent/Descent define clipping, so the vertical centering is better done with synced hhea and typo values.

2 Likes
3

As always, thanks a million mekkablue, very much appreciated. You saved me yet again.

Now that I’ve gotten the type centered for buttons the client is wondering why the first line for body text has dropped…

I guess you can’t have it both ways?

4

Yes. You may be able tweak a little bit with the lineGap values, half of it should be applied above the other half below the line, but it will only get you that far.