When giving “padding” on Figma auto-layout to a button, the text position (inside the box, not the box) is not in the centre height. In the following example, you can see that in one font type there is 2 px space at the bottom and 1 at the top and in the other one, 2px at the top and 1 at the bottom.
That’s led to; 1, the text is not in the centre height, 2, the padding is getting extra which then lead to the wrong implementation.
Later on CSS, the text div won’t behave like that and will wrap right around the text.
The ideal is that the space (padding) above and below the text is even and exactly as set in the padding.
This is how fonts work, you can’t do much here. And “later on CSS” you will have exactly the same issue, although it might be less visible since you won’t be able to zoom in that much.
I have been trying to figure out a solution for the same problem. So far the text height options have been a sort-of solution, being Auto Height the one that I use the most. Truncate I guess can also work. Let me know if this was of any help!
@Shneor
I’m not sure if that helps you but at least on visual side works, you can put a the text inside a container frame and adjust it to desired center of the frame and then put that frame in your auto layout (if Applicable).
I am having the exact same issue (to the point that I thought I wrote this post ) We are trying to define fonts, text box behavior, and auto-layout for a design system, so this is a serious problem.
There is more space above the ascender than there is below the descender. Ideally it should be equal!
) We are trying to define fonts, text box behavior, and auto-layout for a design system, so this is a serious problem.