Speaker A
Let's start by setting the right spacing for this list.
Learn how to pick perfect spacing in UI design using rem units for scalable, consistent, and user-friendly layouts.
Key Takeaways
- Spacing should scale with font size using rem units.
- Start with generous spacing and reduce as needed.
- Group related elements tightly and separate groups with larger gaps.
- Maintain visual balance by keeping inner spacing smaller than outer padding.
- Consistency in spacing is key to a clean and user-friendly UI.
Summary
- Use rem units instead of pixels for spacing to ensure scalability with font size.
- Start spacing with larger values and decrease if needed for better user experience.
- Group closely related UI elements with smaller spacing and separate distinct groups with larger spacing.
- Maintain smaller inner spacing than outer spacing in buttons for visual balance.
- Vertical padding should be smaller than horizontal padding due to optical weight of text.
- Consistency in spacing is crucial for a clean and understandable UI, even if spacing values are not perfect.
- Spacing values like 0.5 rem for close grouping, 1 rem for padding, and 1.5-2 rem for separation are recommended but context-dependent.
- Test different spacing values to find the best fit for your design.
- Use tools like Mobin for design inspiration and improving design choices.
- Proper spacing improves readability, navigation, and overall user experience.
Full Transcript — Download SRT & Markdown
Speaker A
Should I make it tighter or more spacious, should I keep the same space for the heading or move it a bit further or closer to the list?
Speaker A
But before we start,
Speaker A
I need to clarify a few points, this is a 27 inch 2K monitor.
Speaker A
So I have scaled the design to make things legible at smaller screen sizes as well.
Speaker A
And throughout the video, most of the font size is one rem, which is 16 pixels.
Speaker A
I will use rem instead of pixels because we want our spacing to scale with the font size.
Speaker A
This helps create a spacing system that is consistent and useful for any UI you can imagine.
Speaker A
For instance, let's look at this list as an example.
Speaker A
If we want to try a smaller gap, we don't have to guess a random pixel value.
Speaker A
We can just go like this, and we can do the same for higher values as well.
Speaker A
Just increment by 0.25 rem or 4 pixels.
Speaker A
So at a smaller scale, the spacing system looks like this.
Speaker A
In most cases, you will be reaching for a one rem spacing because most of the elements are one rem font size.
Speaker A
For example, with this list, we can start by setting a one rem spacing between all elements.
Speaker A
And then, we can increase the spacing for the heading because it is not part of the list itself.
Speaker A
And that's the most important role of spacing.
Speaker A
Grouping and separating UI elements to help users navigate the interface.
Speaker A
For example, if you put equal spacing between these three actions, the UI will look cluttered.
Speaker A
Users will have to think for a second regarding which button belongs to which group.
Speaker A
Start by grouping the elements with the smallest space possible.
Speaker A
Then increase the spacing between distinct groups by one rem.
Speaker A
It could be two rem as well if you have the space, it all depends on the context and your preference.
Speaker A
Just make sure that this space is smaller than the outer space.
Speaker A
For instance, look at a button like this.
Speaker A
The inner spacing between the icon and the text should always be smaller than the outer spacing or the horizontal padding of the button.
Speaker A
Otherwise, the button will look ugly and confusing to the user.
Speaker A
You can use the same spacing if you really want to.
Speaker A
But never make the outer spacing smaller than the inner spacing.
Speaker A
You only put more inner spacing between elements when they serve a different purpose.
Speaker A
In this case, the inner space between the like and dislike buttons is greater than the outer padding.
Speaker A
However, if you notice the inner space for the button itself is still smaller than the padding.
Speaker A
And you can always try a bigger padding.
Speaker A
So the button looks nice and clean at all screen sizes.
Speaker A
And of course, test different spacing to see which one is the best for your design.
Speaker A
But let us get back to these buttons because I want to talk about vertical padding.
Speaker A
Have you noticed that the vertical padding is smaller than the horizontal padding?
Speaker A
There is a concept called optical weight.
Speaker A
Text has more visual noise on the left and right sides because of the varying widths of letters.
Speaker A
Like U versus W.
Speaker A
Vertical space is much more constrained by the cap height, which is the height of flat capital letters, and descenders, which are the tails on letters like Y or G.
Speaker A
So if you put equal vertical padding, that unnecessary space will look off.
Speaker A
And make the button look bloated and ugly.
Speaker A
For buttons, just pick a smaller value for the vertical padding.
Speaker A
And two times or three times the horizontal padding, depending on the context.
Speaker A
But if you have a lot of vertical elements, you are going to need vertical padding to balance that optical weight.
Speaker A
In this case, we have 1.25 rem padding on both sides, so the inner elements have vertical room to breathe.
Speaker A
Can you feel the tension if I decrease the padding to one rem?
Speaker A
And maybe scale it down to its original size.
Speaker A
Maybe it looks fine to you.
Speaker A
But if you have the space, use it because a little extra white space will only make things easier to read.
Speaker A
But a tighter spacing can literally hurt user experience.
Speaker A
So whenever you want to pick spacing, do not start with a smaller value like 0.5 rem and increase if needed.
Speaker A
Instead, start with a bigger value like 1.5 rem and decrease the spacing if needed.
Speaker A
Let me show you what I mean by setting the spacing between these inner elements.
Speaker A
I am going to use a bigger spacing like one rem to start.
Speaker A
This is obviously too much.
Speaker A
So let us try a lower value.
Speaker A
This is much better.
Speaker A
But the title and author are more closely related than other information.
Speaker A
So let us bring them closer.
Speaker A
Maybe more.
Speaker A
Other than that, I don't think we need to touch anything else.
Speaker A
These buttons have a one rem spacing because they belong to the same group.
Speaker A
But if you notice closely, they both have one rem horizontal padding as well.
Speaker A
So the design looks clean and optically balanced.
Speaker A
If you increase or decrease the spacing, the design will still work.
Speaker A
But it will not look balanced.
Speaker A
You have to train your eyes to notice these small design details.
Speaker A
And for me, it has always been Mobin, the sponsor of this video.
Speaker A
I use Mobin on a daily basis.
Speaker A
Like today, I was designing some cards for this video.
Speaker A
And was stuck on how to highlight the selected card.
Speaker A
So I opened Mobin and searched for selected card.
Speaker A
And just like that, I got a lot of professional and clean designs to steal.
Speaker A
I mean take inspiration from.
Speaker A
And this is just one example.
Speaker A
I cannot tell you how much influence Mobin has on my design choices.
Speaker A
I don't have to visit 10 different sites and waste hours, if not days, to come up with cool and professional design ideas.
Speaker A
Plus the features and functionality of this site are on another level.
Speaker A
And every few weeks, they add a new feature that I never knew I needed.
Speaker A
Like when I saw they added animations.
Speaker A
I thought, yeah, animations are cool.
Speaker A
But then later realized, of course, screenshots are nice, but having live animations makes it so much easier to stay on Mobin.
Speaker A
And study these by playing them on a loop.
Speaker A
Mobin is a must have tool if you want to improve your design game.
Speaker A
Go check it out, you will find the link in the description.
Speaker A
Now, let's get back to the topic.
Speaker A
And fix the spacing for this UI.
Speaker A
As you can see, the typography, colors, and icons are on point.
Speaker A
But I kept this tight spacing on purpose.
Speaker A
I kept random spacing to separate these three sections, but apart from that, every icon, text, button, and interactive element.
Speaker A
Has 0.5 rem spacing.
Speaker A
Even the padding inside these dropdowns and input fields is 0.5 rem.
Speaker A
This is obviously very bad for user experience.
Speaker A
But the design might look okay to some of you.
Speaker A
That's because of the consistency.
Speaker A
Like, even if we did not pick the right number, just because the spacing is consistent throughout, we can still make sense of what is what.
Speaker A
So the first rule of spacing is being consistent.
Speaker A
Even if the number is not right, if you stay consistent, the overall design will look okayish.
Speaker A
It might not be very user-friendly, but it will not look as ugly as you might expect.
Speaker A
Having said that, let us fix this UI.
Speaker A
I am going to start with the first section by setting a generous padding of two rem.
Speaker A
As I said earlier, we always start by setting too much spacing and decrease it if needed.
Speaker A
Now step one of picking the right spacing is to break the UI into groups.
Speaker A
This title and text are closely related, so they belong to group one.
Speaker A
Group two would be these options.
Speaker A
And finally, these two buttons will be group three.
Speaker A
Let's separate them by setting a gap of 1.5 rem.
Speaker A
You might ask, why this number?
Speaker A
Why not one or two rem?
Speaker A
I have been doing this thing for a while, so I just know what will work here.
Speaker A
But here is a tip, if you want to group closely related elements, use a value below one rem.
Speaker A
To separate, use something like 1.5 or two rem.
Speaker A
And one rem falls sort of in the middle, mostly used for padding and grouping buttons.
Speaker A
But this is just a small tip and not some science or design rule.
Speaker A
Spacing always depends on the context.
Speaker A
You will see what I mean in a minute.
Speaker A
Now group one looks fine to me as 0.5 rem spacing works really well with closely related elements.
Speaker A
But these elements definitely need a little more room to breathe.
Speaker A
Let's try a bigger value like one rem.
Speaker A
And see if we need to reduce that gap.
Speaker A
This is better.
Speaker A
For some of you, this might be too much.
Speaker A
But remember, we are zoomed in.
Speaker A
And a little extra spacing is always better than a little tighter.
Speaker A
Now, although we have equal spacing.
Speaker A
This section doesn't feel balanced.
Speaker A
If you notice, all these options have equal height because of these dropdowns and input field.
Speaker A
But the toggle is a bit shorter.
Speaker A
So we have to manually set a height to this option, so the spacing feels more balanced.
Speaker A
Speaking of balanced, if you remember,
Speaker A
we have already discussed optical weight and how we need a bigger horizontal padding.
Speaker A
For these elements that flow from left to right.
Speaker A
0.5 to one rem.
Speaker A
And let's change this gap to space between, so it's cleaner and easier to navigate.
Speaker A
Same thing for this main action button.
Speaker A
People expect these to be on the right.
Speaker A
And finally, apply one rem horizontal padding and gap to finish this section.
Speaker A
But now I think this two rem padding is probably a bit too much for this section.
Speaker A
So let's do 1.5 instead.
Speaker A
Better.
Speaker A
Now we can move on to these two sections.
Speaker A
I am sure, at this point, you already know the next steps.
Speaker A
First break the section into groups.
Speaker A
Then apply a bigger spacing like one rem to separate.
Speaker A
The first group is already working.
Speaker A
But these cards definitely need bigger padding.
Speaker A
And if you remember, we usually put the same outer spacing or gap as the inner spacing or padding for a better visual balance.
Speaker A
But something still feels off.
Speaker A
You see,
Speaker A
for these cards, we also need a grid on top of padding.
Speaker A
So they all have equal width.
Speaker A
You can do this with flexbox or grid.
Speaker A
Or if you really feel like it, just directly putting a fixed width.
Speaker A
Now we can move to section three.
Speaker A
But these icons feel too close to the heading.
Speaker A
So let's fix that as well.
Speaker A
Section three is super easy.
Speaker A
Just use space between instead of this 0.5 rem gap and then separate them with a bigger gap.
Speaker A
So they have some room to breathe.
Speaker A
Let's make these proper squares.
Speaker A
And fix horizontal padding for this button.
Speaker A
Then we just need to bring everything together.
Speaker A
And fix the spacing between these sections.
Speaker A
Let's try two rem.
Speaker A
And finally, let's scale it down to original size.
Speaker A
And compare it to where we started.
Speaker A
All we did is group and separate elements using the spacing system.
Speaker A
And we just use these values.
Speaker A
Two rem was used to separate these three sections.
Speaker A
So actually, we just use these three values.
Speaker A
So if you do not want to use the full system, just these three.
Speaker A
Can also work for most gaps, margins, and padding.
Speaker A
Not only that, but they also make nice round corners as well.
Speaker A
Like, if you put one rem padding and want optically balanced border radius.
Speaker A
These values work really well together.
Speaker A
But that is a whole other topic for some other video.
Topics:UI designspacingrem unitsuser experiencetypographypaddingvisual balancedesign tipsMobinscalable design
