TransWikia.com

How to position text blocks relative to other elements?

Graphic Design Asked by Darkkz on October 27, 2021

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.

enter image description here

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.

One Answer

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

Answered by Keivan Sina on October 27, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP