Rems, Ems, and Pixels. What’s the Difference?
If you open up any website stylesheet you’ll come across rems, ems, or pixels, or any combination of those. In CSS styling, these are the main units of measurements that are used. Whether you are designing a site from scratch, or if you have “inherited” a previously designed site that you need to maintain, these are important for typography, spacing, and other sizing in the visual design.
What makes one unit of measurement better than another? There isn’t a definite answer, and depending on the situation, one might be preferred over another. Knowing the use case and what will work best will help determine the best measurement for your styling.
Pixels
Since the early days of the web, pixels have been an option that is found in stylesheets everywhere. They are reliable, precise, and their consistency cannot be matched. Pixels are supported in all browsers, which makes them easy to work with.
Although pixels are great, they do have some limitations. Because they are such a set measurement, users cannot change the size of default browser text in the browser settings. Things do not scale up like they do with ems and rems, making changing size difficult from an accessibility point of view for the user. One can argue that a user can just zoom in, rather than going into the browser settings. There’s no one right or wrong answer, it is just something to keep in mind.
What are They?
Pixels are a unit of measurement that are based on set sizing. They are the unit for measuring dimensions on a screen and are used when precise design is required. We say things like “pixel resolution,” so we are used to this measurement.
An example would look something like this:
.main-header p {
font-size: 14px;
}Pixels have their use in web design, but in the era of device agnostic web design, screen measurements are not the main focus. It‘s all about how to make our content fit best on countless devices, so there are ems and rems that can help with that.
Ems
This unit of measurement has a long history. It goes back to 1996 and has been around since the early days of CSS. Pixels were considered to be the best practice, so ems weren’t as popular in those early days. They’ve since gained popularity because their purpose is to serve as a unit that is relative to font size in specific content and they help with consistency.
What are They?
If you’re big into classic typography, you probably recognized “em,” because it is a unit of measurement that originates from the world of printed type. Using this as a unit in typography, this measurement is equal to the currently specified point size. For example, one em in a 16-point typeface is 16 points. This unit is the same for all typefaces at a given point size.
We’re not talking about print here, so how do ems figure into web design? Relative sizing is a big selling point to ems because it helps control the sizing of elements as they relate to others. Ems can function as great building blocks to website elements because of the fact that em values compound. It’s important to really understand how this compounding works, though.
Understanding Ems
In most cases, unless browser default is set to something else, an em is 16 px. When you see 1.5 em, that would make it 24 pixels. It’s not always that simple though. What happens when nesting is involved? It can be both convenient and confusing. Knowing how things work when working with ems will certainly help solve any mystery. What is the size of the “I’m nested” paragraph below?
<div class="one">
<div class="two">
<div class="three">
<p>I’m nested</p>
</div>
</div>
</div>.one, .two {
font-size: 0.5em;
}
.three {
font-size: 2em;
}There are three divs here, and the paragraph is fairly nested. With the cascading of the DOM, you may have to do some detective work. Let’s say we are working with an em of 16px, since that is most common.
The .one class is multiplying 1em by 0.5, which is 0.5 em or 8 px. With the .two class, this is once again multiplying by 0.5, which is .25 em or 4px. Things are getting pretty small, so the class of .three will help. We will be taking the .25 em and multiplying this by 2. The result is 0.5 em or 8px.
One thing that may help is setting a size on the HTML element. Something like this will specify the set em size, instead of relying on the em set by the browser. Let’s set 1 em to 20px. If this was used with the example above, the same principles with nesting would apply. Keep in mind though, we’ve specified a pixel size, so that will affect the ability to scale the text by using the browser setting option.
html {
font-size: 20px;
}In addition to pixels, font size can also be set with a percentage. The point being is that ems can work alongside other units of measurements. You will surely encounter this, as it is pretty common to set the body font to a percentage to help set a baseline. Let’s say the font size starts off as 62.5% of the em size. With an em size of 16px, the font size would be 10px.
body {
font-size:62.5%;
}Once you have an understanding, ems can be a good asset to your project. Sizing the text of sub-elements to their parent elements can certainly come in handy. Also, ems make it easy to specify larger padding on the text container than what may be found in word spacing, making it follow the visual rule of proximity. Related items will be grouped visually, with less clutter, and provide an organized layout.
Another great feature of ems is the accessibility advantages. Because it is relative to the root of the DOM, ems make it perfect for resizing the whole design based on user preferences. In the browser preferences, you can easily change the default font size, which then changes the calculations, in ems, to the whole website.
Rems
What are They?
Rems are a fairly recent addition to the CSS timeline. This unit of measurement was introduced with CSS3 and solves some of the issues with pixels and ems. With a name similar to “ems,” you may be wondering what the “r” stands for. It comes from the term of “Root EM.”
The root is the HTML element. The sizing specified on the HTML element is the basis for this measurement. You will see that we’ve used em sizing on the HTML element; it is okay to combine the two measurement types.
html {
font-size: 1em;
}
.one {
font-size: 1.2rem; /* 1.2 x the value set in html */
}Modern browsers support rems, but be sure to check with BrowserStack what older browsers you need to support before committing to rems. Don’t let older browsers hold you back though; you can always specify a pixel fallback for anything below IE9. Modern browsers ignore the pixels because they prefer rems. It could look something like this:
.my-text {
font-size: 24px;
font-size: 1.5rem;
}Understanding Rems
Remember the math we had to do for the nested elements of ems? That is not necessary with rems. It’s all based on that root element. We don’t have to worry about parent elements, it is always based on the root.
<div class="one">
<div class="two">
<div class="three">
<p>I’m nested</p>
</div>
</div>
</div>html {
font-size: 1em;
}
.one, .two {
font-size: 0.52em;
}
.three {
font-size: 2rem;
}There are three divs here, and the paragraph is fairly nested like we saw in the em example. Again, let’s say we are working with an em size of 16px.
The .one and .two classes have sizes assigned, but they don’t really matter here because nesting isn’t affected with rems like it is with ems. All that really matters is the styling of .three, which is 2 ems. The paragraph would be based on the HTML element of 1em. This measurement would be doubled, giving us 2 rems or 32 pixels.
Want to evenly scale everything up? Just adjust the root element size. This is also helpful when adjusting browser default size. You could see how ems allowed for that, rems do also.
There is a lot less to worry about concerning unpredictable nesting behavior with rems. It is easy to understand where the root element comes into play and how that affects your styling when using rems.
When comparing the different measurements, you can see that they have their pros and cons. Really understanding how the units of measurement work, and how they work with browser settings, will help you choose which will work best for the situation or project.
Make Your Site Pixel Perfect with WP Engine
To make sure every single pixel of your site loads quickly and seamlessly, you need high-quality WordPress hosting. Check out WP Engine’s plans to find the one that’s right for you!
