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:

Viewport: px
<div class="exemple">
<div class="exemple__item exemple__item--25"></div>
<div class="exemple__item exemple__item--50"></div>
<div class="exemple__item exemple__item--75"></div>
<div class="exemple__item exemple__item--100"></div>
<div class="exemple__item exemple__item--125"></div>
<div class="exemple__item exemple__item--150"></div>
<div class="exemple__item exemple__item--175"></div>
<div class="exemple__item exemple__item--200"></div>
<div class="exemple__item exemple__item--250"></div>
<div class="exemple__item exemple__item--300"></div>
<div class="exemple__item exemple__item--350"></div>
<div class="exemple__item exemple__item--400"></div>
<div class="exemple__item exemple__item--500"></div>
<div class="exemple__item exemple__item--600"></div>
<div class="exemple__item exemple__item--700"></div>
<div class="exemple__item exemple__item--800"></div>
<div class="exemple__item exemple__item--900"></div>
<div class="exemple__item exemple__item--1000"></div>
<div class="exemple__item exemple__item--1200"></div>
<div class="exemple__item exemple__item--1400"></div>
<div class="exemple__item exemple__item--1600"></div>
<div class="exemple__item exemple__item--1800"></div>
<div class="exemple__item exemple__item--2000"></div>

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 valueReference name
magic-unit x 0.254pxmu025
magic-unit x 0.508pxmu050
magic-unit x 0.7512pxmu075
magic-unit x 116pxmu100
magic-unit x 1.2520pxmu125
magic-unit x 1.5024pxmu150
magic-unit x 1.7528pxmu175
magic-unit x 232pxmu200
Multiplier (between 2 and 4)--
magic-unit x 2.540pxmu250
magic-unit x 348pxmu300
magic-unit x 3.556pxmu350
magic-unit x 464pxmu400
Multiplier (more than 4)--
magic-unit x 580pxmu500
magic-unit x 696pxmu600
magic-unit x 7112pxmu700

A good usage of the magic unit

Magic unit usage by properties:

Use for lines heights
Use for max-height, min-height, max-width, min-width, to determine the standards desired sizes
Use for margin and paddings
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.