I have always had this question; what should be the standard and more readable space that we should add when design applications. So would like to know the best sizes for the space

enter image description here

  • Specifically for Material Design, you can checkout the specs section for the text fields documentation, Material Design - Text Fields.
    – Tory
    Nov 3 '16 at 15:17

There is not a standard to be found here for the specific question, as it touches on the broader context of vertical rhythm in the design grid of the page.

The vertical rhythm is defining line heights and vertical spacing between the elements. It gives your page a harmonic feel with a nice grouping of elements, that ultimately increase scan-ability and readability.

You could use a core unit like eg. 6 px, and make sure all height values can be divided by that down the page.

Next you'll want to make sure that components are grouped visually in clear way. It should be clear that the label is grouped with an input field below, and not any input fields or other elements above. You achieve this by simply increasing the distance between the component based on your core unit.

If you use 6px as your core unit you could end on something like this: enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.