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:
- It’s good to follow the rule of thumb that a margin around an element should be the size of a single “M” character
- Margins should be linearly proportional - have a standard size, then a smaller one (half size) and a larger one (double size)
- 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
Heckle me on Twitter @basicallydan.