Anyone have tips on aligning Noto Sans in their UI? It seems to align best at odd numbered line heights. The problem is, this can create a need for half pixel paddings to keep sizing consistent (multiples of 8) and better aligned with adjacent icons.
Question
Noto Sans in UI
What size is the button?
Also does using the align middle text property change the behavior at all?
No, changing the text’s vertical alignment has no effect.
Ah yeah sorry you’ll first need to adjust the text to have a fixed height then the alignment should work. I see what you’re saying though. This may just be how Noto defines their line height. One other thing you could try is the vertical trim property which can be found in the type settings. This might help you align things vertically.
Also is your button height an even number of pixels?
Yeah, the component, (a chip/label, etc) is intended to be 16px tall. I was relying on the line height of the text to influence this but Noto at 16 causes the drastic misalignment with the perfectly centered icon. My concern is leading-trim’s CSS support, but I’ll ask engineers their perspective. Thanks for the suggestions!
Yeah I don’t think leading-trim is widely supported yet. I just did some tests in the browser too and it does seem like the odd number line-height gives a better result. I do think this is just how the font is designed and not something unique to Figma.
1 person likes this
Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.