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

Any updates on this @figma? What is the matter, that fonts (Helvetica Neue LT Std in my case) are not displayed correct? I tested in Adobe InDesign, and there the font has the right boxing.

We build our entire design system with this font and it would be crucial, to have it displayed properly.

Sadly, this doesn’t do anything with the Helvetica Neue LT Std. The problem stays the same, since Figma does not seem to recognize the correct bottom box line of the font.

@Figma_Support

Hey,

Can we have any update on that? This is critical bug and it affects a lot of fonts…

Hey All,

Our team has investigated this issue, and it’s not a bug. This is currently expected behavior.

Figma uses the whole vertical size to position middle alignment, so if the glyphs of a certain font are unusually top/bottom aligned already, they’ll look strange.

This screenshot shows highlighting of the different text laid out in Figma and a 3rd party tool. We can see that TTCommon is just very offset. It’s even more visible in the 3rd party tool where the redline indicates the bottom of the glyphs. You can clearly see how much space there is below.

So you found one font that has the same problem in other software and you mark the thread as solved? Dvaliao have you read the whole thread where users give examples of fonts that work well elsewhere, but not in figma?

We understand your frustration, & we apologize that this is not an ideal outcome. But yes - I read the entire thread, & our team evaluated several different user files & fonts.

Again, because Figma uses the whole vertical size to position middle alignment, if the glyphs of a certain font are unusually top/bottom aligned already, they will look strange in Figma.

Has anyone found a solution to this? I have a font I have to use for a client and it’s making my normal autolayout workflow for creating padding on buttons etc impossible and inaccurate. (This is using Nimbus Sans loaded through Adobe Fonts).

1. Designer creates file in iOS
2. I open file in Figma desktop app on PC
3. I click into text field where text is perfectly aligned in the middle of the cell
4. Text jumps to top of cell

Font = Overpass

Since this is not an ideal outcome, are there any plans on the roadmap to solve this problem? Even popular system & open source fonts (Segoe UI, IBM Plex) have a baseline that sits well below (or above) the center of whole vertical size. Which makes it very cumbersome for designers to center align text with other elements and inside of elements.

All fonts should be accessible for use in Figma, not just the choice few that have a baseline which sits at or near center. My fingers are crossed for a swift and elegant solution because the problems generated by the concious choice to center by whole vertical size results in a solution that is very upstream to the values at Figma.

Thank you @dvaliao for addressing the community regarding this problem.

Just to note for anyone struggling with this as well,

I tried @joshmillgate 's workaround but was unsuccessful with FontForge even after following the video explicitly.

I then tried @Theo_Kekatos 's workaround by using Transfonter. This is a font converter with some neat settings. To achieve the workaround you have to set the “Fix vertical metrics” toggle to “On”. I then downloaded the converted files, installed them, restarted Figma, and it works. My font is now vertically aligned inside it’s bounding box.

Good luck everyone.

Just adding in another request for this. We use Calibre across the entire app and this issue is wreaking havoc on our design system and forces us to use inconsistent padding. Doing the workaround with a frame on the text can cause issues when engineers inspect. We can’t easily convert our app so I would really like to see this fixed in Figma.

Jumping on this topic. Agree with everyone that this is a very frustrating issue. Why am I only noticing this font display problem lately? If I recall, it wasn’t always this way in Figma?

I am fairly certain this is “new” behavior. I am designing a card game in Figma, but haven’t worked on it actively for more than a year, before recently picking it up again. All of my card templates are now broken. They look OK until I click a text box to edit the content, and then the font resizes and screws up the padding of the elements. I am using the Overpass font too, as someone else in this thread is doing.

Bro, thank you! ❤️

Dear Figma,

Even if you are displaying the font the way it comes to you, but it is not working for the designers, you need to provide a solution that does work for us. Especially if garbage like XD can display font in the desired way.

Sincerely,
Everyone

To add context to the vertical alignment discussion, when I compared vertical alignment of Univers (all caps) in Figma to the same in PowerPoint there was a significant difference. Ppt spaces evenly between top and bottom walls of text box (or creates even cell padding), whereas Figma creates thicker cell padding at bottom. Comparisons to powerpoint may be frowned upon…but if a non design tool can align text vertically I don’t think it’s an issue of fonts / font glyphs. I’ll try the transfonter work around for now, but any other suggestions would be appreciated!

Thank you for this. I feel like i’m glueing together my design, but it works at least!

Hey! I was struggling with this too, so damn annoying! I found a small work around:

1. Group text on it’s own
2. Add Auto layout
3. Add a few pixels of top padding (I used 2px but depends on typeface)

It sucks but at least I can now have auto layout on buttons with it ACTUALLY being vertically centred.

Replying to this just so Figma doesn’t close it without a solution. Do better for us Figma.

Bump, still a problem with several fonts. Changing the font file doesn’t seem like a viable option.

Agreed. Local fonts in a browser is not an option for me, so I can’t center Inter. 😔

Don’t close, please fix this figma. My head is about to explode

Struggling with this as well. Working on the type system for our design system and it is pretty hopeless…

I just finished reading this nearly 2 year long thread. And like many of you, my head is about to explode! WTF Figma!!! How has this issue not been resolved??? This is fundamental stuff. The fact that other lesser programs have no issue with this and the most popular digital design software can’t seem to handle this is absolutely mind blowing. Thank you to the folks who have found work arounds, but I can’t imagine how much of everyone’s time this has wasted. From the few responses in the thread it seems Figma is just blowing this off completely!!! Agree with @username1 in that this should be a HIGH PRIORITY ISSUE! Figma please fix this. It is not resolved. And it is not a font issue.