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;
}