ems and rems

So today I pretty much learnt about ems and rems, the differences, the use cases and when one is preferred over the other.

So what are ems and rems?

These are units of measurements in css. em is a multiplier of its parent's element font-size while rem is a multiplier of its root element's font size. Check out CSS guides to learn the difference between root element, parent element and child.

When to use ems and when to use rems

rem units are a bit more consistent and scalable. This means that with rems for our font sizes, we are able to write few media queries as compared to using ems, and they won't compound on each other. The font-size is always looking at the root while the widths, margin, padding, heights, etc are looking at the font-size

Why you shouldn’t set font size using ems

ems compound on each other. When ems are used for font size, they look at their parent’s font-size to know what to be set to(referencing the parent font-size). This means that the font sizes won't be consistent in the page.

When do we use ems then?

Margins, paddings, widths, etc

ems set on anything other than font size do not reference the parent element. They reference the size of that element. So using ems on padding and margin helps with responsiveness and easy layout.

Check out this codepen link to help you play around with ems and rems on all the cases and see the results. Happy coding!

Knowing when to use ems and when to use rems, their differences, advantages of one over the other, helps with simple and easy css code as well avoiding writing many unnecessary media queries.

Reference