Predictable and Harmonious spacing is useful because it not only makes everything look better, but it also is used to deliberately for improved readability and consistency in product.
2 practical steps to create a predictable and harmonious spacing system.
- Baseline grid – Determine line-height of your body text and know your baseline grid number.
- Geometric progression – Pick a limited number of values from the geometric progression of your baseline grid number’s factors and multiples.
Rule of 3Cs
- Rule for containers – Apply uniform inset spacing inside all containers in your UI.
- Rule for content – Content is stacked vertically. Tackle the header stack first, by trying to get to a margin value that works consistently across all headers. Solve the leaf -node stack next, by addressing spacing needs for paragraphs, lists, form, tables.
- Rule for components – Apply uniform inline spacing for all adjacent components in your UI. Make exception with smaller spacing only for components that are associated together.
When positioning elements vertically, the designer has to make decisions that never should be left to chance or be random. Too often, designers rely on vertical increments made possible in Photoshop by holding shift and arrows keys: “I use 5 or 10px, it depends.” This approach is acceptable horizontally, as columns are multiples of 10, but it doesn’t conform to any typographic reality.
— Robert Bringhurst (Author of “The Elements of Typographic Style”)
All of the information I gathered here, has come from Priyanka Godbole and prototypr.io