Is there any way to always align (a single line of) text to the bottom of the baseline, regardless of the font size?
Aligned correctly:
As soon as I increase (or decrease) the font size, the baseline alignment shifts:
This happens no matter if I set the line height, text height to specific values or align to the top, middle or bottom. This problem happens with every font family too.
Hacky fix, sort of…
The only method I’ve found to “fix” the problem above, is by adding a second line of text with a character, such as a space, so it’s invisible:
Then I can change the top line keeping the baseline alignment intact:
I need it to work with a single line of dynamically sized text inside a component as I can’t change the position manually and I’d rather not deal with multiple lines of texts, just to align the first line of text.
Also tested this in Sketch & Adobe XD, there it aligns to the baseline regardless of the font size and works as expected.
If anyone knows a solution that doesn’t involve a blank extra line, please let me know.