How to set up vertical metrics for better alignment in Figma

#1

This typeface that I’m building (Dt Flow in the attached picture) reacts all normal in other environments like Adobe or Microsoft softwares. But in Figma, it tends to go 1px down when the line height is set to even numbers - obviously lower when compared to other fonts of the same size and weight.

My team is building many components in Figma based on 20px scale, and I don’t want to cause them huge amount of work moving everything 1px up just because of changing the font. I’ve tried several things editing vertical metrics values but can’t seem to find a way to influence this.

Any suggestions or insights?

Screenshot 2022-07-13 at 10.40.52
Screenshot 2022-07-13 at 10.40.521494×626 54.5 KB

#2

Have you read this: Vertical Metrics | Glyphs ?

1 Like
#3

I assume it is a combination of hhea/typoAscender and the respective line gaps.

Different fonts are not supposed to align. But if you want to keep the same metrics as a previous font, you may need to adjust the UPM value, and mimic the ascender, descender and line gaps proportionally in the hhea and typo values.

1 Like
#4

Check out this script. It is based on the strategies in the tutorial Georg linked to

1 Like
#5

I recently got into a bit of a fight with a client about this :wink:

Turns out some apps (including Adobe XD and also Figma, I seem to remember) place the text according to the “bounding box” defined by typoAscender and typoDescender (or hhea, I don’t remember). In order to center your glyph in this bounding box, you need to center your caps within the bbox. In any case, what you can try is set the typoAscender and typoDescender according to the following recipe:

define a bounding box size (client requested explicitly 1200, for example).
margin = (bbox - capHeight) / 2
typoAscender = capHeight + margin
typoDescender = -margin

So, for example, your bounding box being 1200 and capHeight 700, your margin would be 500/2=250. typoAscender would be capHeight(700)+margin(250)=950 and your typoDescender would be -250.

I personally don’t use Figma but can attest to this being the defining factor in Adobe XD. Give this a shot and please let us know, too :slightly_smiling_face:

1 Like
#6

Yes! It’s rather helpful, but maybe not helpful enough concerning Figma :see_no_evil:

#7

Hey thank you so much for this recipe! I tried it out with typoAscender & typoDescender, doesn’t seem to do anything in Figma. But I used same values as your recipe on hheaAscender & hheaDescender, worked perfectly for Figma.

Problem solved! :raised_hands:

1 Like
#8

Thanks a lot for testing and getting back to me on this! Really valuable. Great to know.

1 Like
#9

Possible that Figma uses the hhea values on one platform, and the typo values on another. Keep them in sync in any event.

1 Like