SOLVED: Align and style your text by trimming any extra spacing

Hi, I’m facing the same problem of vertical alignment of some fonts having baseline spacing that it won’t align to center to the buttons. Each time I have to manually adjust the spacing… it’s frustrating and annoying. Please @figma fix this problem or provide us with some solution.

Workaround (not working with icons inside frame):
https://www.figma.com/proto/DEQ6tXHytHu4iqtuXmUzpg/button-centering-w-autolayout?
node-id=1%3A2&viewport=412%2C492%2C1&scaling=min-zoom

Please @figma look into this. I had the problem in the past (with a couple of fonts) and now having it again with the font ‘Calibre’. The misalignment messes with all of the component paddings and I’d need to go into every individual component trying to do a “manual alignment”.

I found multiple complains on the web about this and no answer from Figma (a couple of examples below). Please look into it.

• Old Spectrum forum post titled " Weird font line height / em box?!"
• Old Spectrum forum post titled " Font Calibri vertical-align in line-box"

Hello @anon21722796 can you please provide a fix for this ?

It’s a true pain since my client’s font is ITC Avant Garde Gothic W1G and the same problem occurs.

Same here. First I thought maybe the typeface was designed this way, BUT, there is no problem in XD…

Oh my, I thought I was going nuts when it came to this problem too and started blaming the typeface as the issue. Glad to see other people having this issue as well

@anon21722796 @Hypermatic please can you shed some light as to why this is happening?

When I started to had this problem we was in the middle of a big design system project. Icons wasn’t align with text boxes . Also buttons, inputs are, wasn’t look symetrical up and down. We tried everything in figma’s menu features but it doesnt work. And we changed with a new font family (montserrat 😁) the whole text styles. It took us with the all conrols 2 days. Problem was looks solved just for the moment. However, we can no longer easily use a font other than a few main families. This causes things to take longer. It so sad…

Now my solution…

This problem is mostly eyesoreing in single line text objects.

Select text box > align top (text section) > set the heigh under the text line manually > when under pixels getting the same with the top create your text style. When you use it in the autolayout this wouldn’t annoying anymore.

I know this is really stone age, but praticly it works.

Sorry for my mediocre english 🙂

@anon21722796 also having this issue

Having the same problem with Univers take a look.

I now have the same problem with 2 customers. Is there a solution in the meantime? @anon21722796

I had the same problem with a paid font. After a bit research, I found this tool → https://transfonter.org/ . Just, upload your fonts, and don’t forget to change to “on” the option “Fix vertical metrics”. After this download the new fonts and replace them with your previous ones. Worked for me 🙂

Having the same issue with Arco Perpetuo Pro font.
Like quite annoying, I was just digging deep into this font if it was the fault of it is @Figma_Support fixing this ?

A workaround that works with icons as well is to make a group containing text and spacers inside the button. The spacers are used to create same hight below the baseline and above the cap. with this you can align correct vertically. To hide the spacers set the opacity to 0% and voila your button aligns as intended.

Also having this same issue with the Open Sans font. It just seems to favor the top with more spacing.

I’ve tried manually tweaking the row height as well as the proposed fix above with aligning to top and setting the height- however it isn’t accurate at the subpixel level. This is a bit obsessive, but it can make the difference in a design looking polished.

Hi everyone 👋

Was there some kind of change on how Figma renders fonts today/yesterday? We started noticing and having weird issues a couple of hours ago with text that is part of a component. When we click on that text, its vertical position changes slightly.

Thanks for the help

The issue lies in the font file itself, I’ve provided a video guide to fix this issue here:
(Skip straight to fix: 1:18)

This issue lies in software not in font itself. See how differently xd or sketch display specific font. If there is software where you can center a text vertically and the other has problems, it’s not a font problem.

Unfortunately You’ve presented another workaround.
I am curious how other programs will react to this font edition.

I stand corrected, just checked out the fonts in Sketch.

Wtfigma?!

I wish myself and you that figma will not turn out to be a ‘little adobe’, where you have to wait for bugs fixes for years, and during this time the corporation deals with ‘gadgets’ instead of improving the foundations of the software

@joshmillgate idea is a great fix but it’s better if Figma fix it by their own because I don’t want to corrupt files or create bugs when I collaborate with everyone with the font !

@Figma_Support

Any chance of an update on this? The prospect of trying to create a Design System with this inherent behaviour is… troubling. Due to inheritance across components, starting with an atom that is problematic is going to cause a serious headache.

I’m using “Helvetica LT Std” for a project and its driving me crazy . hopefully a fix will come soon

same issue , i just start using it now after 5 min stuck with this crap

Hi ! The last release resolve that problem:

I hop it will help you 🙂