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?
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).
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.
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 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):
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.
Ems use their parent’s font-size as their base. Rems use the HTML font-size as their base.
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.