Why rems are great in under 200 words
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 html
selector.
Thoughts?