The magic unit is a base unit for any element or property that require a defined dimension. It is equal to 16px but is expressed in rem.
We multiply or divide it to define white spaces, icons sizes, line-heights etc...
Using a magic unit have multiple benefits.
- It make the overall compositions feels more harmonious and organised.
- It help create a sense of vertical rythm (or baseline)
- It help create consistantly sized and spaced elements
- Therefore it improves modularity and reusability. Just drop common elements next to each others, there is a good chance that they will fit the same vertical space and be perfectly aligned.
In the following example, we see a grid in the background based on the magic unit. It is subdivised in halfs and quarters to give us better control for small elements that require it. We can see the red squares snaping to the magic unit grid. By hovering the squares, you can see how we used the magic unit and the corresponding values in Px:
The level of granularity that can be used depend of the size of what you are trying to define.
A good usage of the magic unit
Keep in mind that most elements should be designed to be able to grow and and strech with responsiveness and accessibility in mind:
- Elements may be used by other teams in various layout configurations.
- Browsers, devices, or even plugins dedicated to disabled users may change the way things are displayed.
- User customized browser zooms and font-sizes may break your ideal composition.
- New devices form factors that we didn't expect may appear in the future.
All thoses reasons may very well make your perfect one line button break into multiple lines in your user's hands.
Building a resiliant and elegant system require a design that fit perfectly for the most common cases but degrade gracefully in the most unexpected ones.