Magic Unit
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...
Why do we use the magic unit?
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:
How to use it?
The level of granularity that can be used depend of the size of what you are trying to define.
Use quarter of magic unit for sizes less than two times the magic unit
Use half of magic unit for sizes between two and four times the magic unit
Use magic unit multiplied by integers numbers for sizes greater than 4 magic units
Examples of good values:
| Multiplier (less than 2) | Pixel value | Reference name |
|---|---|---|
| magic-unit x 0.25 | 4px | mu025 |
| magic-unit x 0.50 | 8px | mu050 |
| magic-unit x 0.75 | 12px | mu075 |
| magic-unit x 1 | 16px | mu100 |
| magic-unit x 1.25 | 20px | mu125 |
| magic-unit x 1.50 | 24px | mu150 |
| magic-unit x 1.75 | 28px | mu175 |
| magic-unit x 2 | 32px | mu200 |
| Multiplier (between 2 and 4) | - | - |
| magic-unit x 2.5 | 40px | mu250 |
| magic-unit x 3 | 48px | mu300 |
| magic-unit x 3.5 | 56px | mu350 |
| magic-unit x 4 | 64px | mu400 |
| Multiplier (more than 4) | - | - |
| magic-unit x 5 | 80px | mu500 |
| magic-unit x 6 | 96px | mu600 |
| magic-unit x 7 | 112px | mu700 |
| etc... | - | - |
A good usage of the magic unit
Magic unit usage by properties:
Use for max-height, min-height, max-width, min-width, to determine the standards desired sizes
Use for width and height of determined sized elements (icons, checkboxes, some images)
Think twice before using the magic unit for widths and heights
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.