How to position text blocks relative to other elements?

Question

I always had this question in my mind and never managed to answer it.

How do you position text regarding other elements? Let's say you want to have a block of text, a heading block of text, at 16 pixels from another element. You strip the line spacing (aka line-height) on the text and move the block 16 pixels or keep the line spacing and move the block 16 pixels which will result the block of text being further away from the previous element. Please see the attached picture for clarification.

What is the best practice for my problem? I am also thinking if eliminating the line spacing will influence in some way the development, even if a tool like Zeplin is used.

Answer 1

I think that you should always think that what if this text become 2lines and set the line space value assuming that it can become more than one line. It's recommended to set line space 150% to have more readability but it has some exceptions.

You can read more about line spacing here:

https://www.justinmind.com/blog/best-ux-practices-for-line-spacing/

https://medium.com/dwarves-design/the-principle-of-spacing-in-ui-design-part-1-3354d0d65e51