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

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

4 Likes

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!

1 Like

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.

1 Like

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

2 Likes

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

2 Likes

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

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.

3 Likes

I’ve got the same issue as well. For example, I’m using different design sets for one app (to switch between designs within the same app structure) and the line height issue is VERY noticeable. It’s a struggle when trying to use auto layout to be efficient but with the line heigh it takes unnecessary time to correct and is sometimes not possible with auto layout. And if I’m not correcting, it looks like a sloppy design. Apparently this has been a problem for two years now and Figma hasn’t corrected this already? Please correct it Figma, this isn’t a font issue and a very basic necessity.

Hi Jason, thanks for this solution. It works perfectly well for me. All I did was follow your directions. I think it’s more preferred than my initial workaround which is having a spacer, which I called “space buffer”, around the text and then grouping it before adding auto layout with the icon.

1 Like

:wave: Glad I could help, but all credit belongs to @Theo_Kekatos for this nifty workaround! I was just sharing my own experience since this is a very popular thread, and a very difficult problem for most who come across this issue.

Hoping the Figma team can bump this up in priority as a ‘small win’. I’ve seen numerous posts about this issue on Reddit as well, and the workaround is less than ideal. @Figma_Support @dvaliao

1 Like

Hello everyone! Figma finally done it! New Little Big Update covers our need - Vertical Trim in Type Settings is the answer we were looking for :slight_smile:

@dvaliao We can close this topic. Thanks!

1 Like

How is this updated? I just came here for the very same issue.

1 Like
3 Likes

Ah perfect, my little known font HelveticaNeue “doesn’t support trimming” and it’s grayed out :confused:

@Chris_K1 Try it in a new file or on new text layer. Helvetica Neue is supported - i’ve just checked. It’s probably a little bug.

1 Like

Elena, it actually worked for me. I am using the exact same font as you for a project and it’s what led me to this thread.

After clicking that option (check box) in the Advanced layout you need to then align the text to the bottom with that button as well “align bottom” and it should work with equal vertical pixel space like it did for me.

2 Likes