What I'm struggling with is having the text itself aligning with the baseline grid. Whenever I use auto layout, and have the padding, font size and line height set up to be divisible by 8, the text baseline itself doesn't align with the baseline grid? Do you know why that is? I believe it has something to do with the height of the textbox. When I set it to auto height, it messes up the space above and under the first and last textline. So the textbox itself will align with the grid but the text inside does not, even though it is a multiple of 8. Any idea how to fix this?
The line hight is the same value of the textbox height (for single line text). When you have multiple lines, it just mutipies it eg: line hight of 16px in a 3 line block of text will give you a 48px high element, One thing to check is your text item settings, if is set to line, fixed width or fixed width and heigh and if is set to center, top or bottom align Nonetheless, I advise you to focus on fitting the macro components on the grid (buttons, cards, fields…) instead of every single element. A container can have its own grid as well. Hope this answers your question! And keep learning!
What I'm struggling with is having the text itself aligning with the baseline grid. Whenever I use auto layout, and have the padding, font size and line height set up to be divisible by 8, the text baseline itself doesn't align with the baseline grid?
Do you know why that is? I believe it has something to do with the height of the textbox. When I set it to auto height, it messes up the space above and under the first and last textline. So the textbox itself will align with the grid but the text inside does not, even though it is a multiple of 8. Any idea how to fix this?
The line hight is the same value of the textbox height (for single line text). When you have multiple lines, it just mutipies it eg: line hight of 16px in a 3 line block of text will give you a 48px high element,
One thing to check is your text item settings, if is set to line, fixed width or fixed width and heigh and if is set to center, top or bottom align
Nonetheless, I advise you to focus on fitting the macro components on the grid (buttons, cards, fields…) instead of every single element. A container can have its own grid as well.
Hope this answers your question! And keep learning!
Should not the text (body) be aligned with each grid?
Thanks so much man!
Glad to help! Stay tuned! 🔥