What are Ems and Rems?
Ems and Rems both are scalable units in CSS which are relative to a base font-size in pixels. So what’s the difference between the two?
Ems
An Em uses it’s parent’s font-size as it’s base. If a parent does not have a font-size specified, the default HTML font-size of 16px is used. For example, if a <div> has it’s font-size set to 16px and it contains a child <div> with a font-size set to 1.25em, the font-size of the child <div> would be 20px (16 * 1.25 = 20px).
Example:
See the Pen Emohe by Corey (@CoreyMSchafer) on CodePen.
The problem with this is that Ems can size unexpectedly if you aren’t careful. It is sometimes difficult to keep track of each parent’s font-size. For example, if you set all of your <h1> tags to have a font-size of 1.5em, this size will be scaled differently depending on where your <h1> is placed.
Example:
See the Pen cKtnC by Corey (@CoreyMSchafer) on CodePen.
As you can see, this may be difficult to maintain as your website grows. Is there a better way to make sure our sizes remain consistent? That’s where Rems come in.
Rems
Rems were introduced with CSS3. Rem stands for “Root em”. Instead of using the parent’s font-size as it’s base, Rems use the root HTML font-size. By default, the HTML font-size is 16px. This allows us to have a consistent size when using Rems. Let’s use Rems in our previous example and you will see that it takes care of the font-sizing problem we were having (we’ll assign <h1> tags a font-size of 1.5 again):
See the Pen hqbrn by Corey (@CoreyMSchafer) on CodePen.
As you can see, our problem with uncertain font-sizing is eliminated with Rems. This will help ensure that we have consistent sizing for our elements throughout our webpage.
TL;DR
Ems use their parent’s font-size as their base. Rems use the HTML font-size as their base.
Resources
Why should I use Ems or Rems anyways? Why not just size everything in pixels? Great question. I am going to defer to some great resources on that, plus some additional information on how pixels, ems, and rems all work together.
StackOverflow: Why em instead of px?
CSS-Tricks: Why Ems?
Snook: Font-Sizing with Rem