rstacruz/Using rem units in CSS.md

## Using rem units in CSS.md

      
    Raw
  

              Using rem units in CSS.md
            
          
    Using rem units in CSS

One pattern I've noticed lately is using rem as a unit of distance in CSS. This seems like a pretty good idea.
.box {
  height: 1.5rem;
  padding: 1rem;
}
The 8-point grid


If you use an 8-point grid for your design system, the rem unit is a perfect compliment for it. The default 1rem is 16px.
:root {
  /* This is used as the default for browsers
   * and popular CSS resets.
   */
  font-size: 16px;
}
This means you no longer need to memorise multiples of 8px.


Pixels
Rem


8px
0.5rem


16px
1rem


32px
2rem


48px
3rem


64px
4rem


Tailwind CSS

Tailwind uses this for its spacing scale. Tailwind uses an 8-point grid by default.


What if you need to change the text font size?

If you need to change the root font size, change it in the body element. This will let you use 16px as a base for rem units, but still have a different body font size.
body {
  font-size: 14px;
}