Dan Hough

Why rems are great in under 200 words

Published 26 February 2015 in London, UK

My main reason for using rem in CSS is in order to easily keep margins, padding, and other whitespace-affecting things consistent with font size and well-proportioned. I make three basic assumptions:

  1. It’s good to follow the rule of thumb that a margin around an element should be the size of a single “M” character
  2. Margins should be linearly proportional - have a standard size, then a smaller one (half size) and a larger one (double size)
  3. There should be a limited number of font sizes on the site, and the body copy should be the most common one

That means the standard margin is the width of a single “M” character at the most common font size, which can be set in the html selector in CSS, and if I want to use that standard margin I need look no further than 1rem. I can easily figure out a small margin using 0.5rem and a large one using 2rem. It’s a good starting point, at least.

Then if you decide that you want to change the base font size and thus the margins, you need only change it in one place, the html selector.

Thoughts?

Heckle me on Twitter @basicallydan.