When I use ems and when I use rems in CSS

My rule of thumb is to use ems when I need size text that should scale up and down with the text around it, retaining the same relative size to this surrounding text. In contrast, I use rems for padding and margins around text, so they have some consistency with the base font-size of the browser. These rules of thumbs work well when the majority of paragraph text is sized as 1rem.

Color scheme: