When have you designed an interface without any typography in it?
Spacing font size, color, and line-height – all of these elements work together to achieve a more easily scannable user experience.
Having good spacing ensures you have an established vertical rhythm and define relationships in which your elements are present.
Small title spacing
When you have a small headline it should be closer to the paragraph text.
Small headline = small spacing – this helps highlight an important part of the text and it’s not breaking the reading flow.
There isn’t a set number, but I’d advice going for something between 8px and 12px.
Large titles
However, if you have a large title you can’t have the same spacing as a small title.
Having a small spacing will make it super hard to read, so if you bump up spacing it will create better contrast with the tiny text.
This creates a better visual balance and improves readability.
Improve spacing between paragraphs
Having the same spacing will be challenging for people to actually scan through your content and separate each part of the text from another.
If you add more space it will make the transition from one topic to the next one clearer.
Images? No problem!
Images are more than just decoration; they have the power to make or break a user’s experience.
They are visually heavier as our eyes are used to it, adding extra space will help you create more breathing room between vibrant imagery and the context.
Create rhythm
Don’t obey your grid (soft or hard…).
This can make you fall into a trap of being obsessed with everything to line up to that grid. An interface should be fluid and not rely solely on numbers and lines how it looks.
Try to create a consistent vertical rhythm when working with your ty
In one of the course lessons, we talk more in-depth about how you can create better contrast and stay consistent with spacing.
