As a web developer, I have to decide among three units of measurement – px, em, and rem. Which one to use when, where and why has been a source of confusion and countless debates. In today’s post, I will explain the difference among px, em, and rem and go over some practical applications for these three units of measurement.
Pixels
Pixel (px) is the easiest unit to use and is the one we are most familiar with. Px is an absolute unit of measurement, which means px values are used by the browser as is. For example, 10px will always display as exactly 10px. Contrary to what you may think, the size of a pixel isn’t always the same among different devices so a 15px on a Macbook is not the same as 15px on an iphone. However, it is important to note that on each device a px is always the same.
A website that is done entirely using px is bad for web accessibility. This is because browsers allow users to set their default browser font-size to be something other than the default (usually 16px). If the user sets their default to 20px for example, all font-sizes should scale accordingly. However, that’s not the case with a website that defines font-sizes using px. Instead, a user’s font preferences won’t be reflected, which is considered bad user experience (UX). Thus, pixels may be a good choice for spacing and layout but not a good unit of measurement for font-size.
Em and rem
Unlike px, em and rem are relative units of measurement, translated by the browser into px values. While em is relative to the font-size of the element on which they are used, rem is relative to the font size of the root HTML element. Using em and rem provide flexibility in web design, and the ability to scale elements up and down; they are therefore essential in responsive web design.
Em
An em is equal to the current element’s font-size. Therefore, if the font-size of an element is 16px, 1em is equal to 16px. If you define the width of the element to be 2em, then the computed value for the width would be 2 * 16px = 32px. It is a common misconception that em is relative to the font size of the parent element. Parent element font sizes can affect em values via inheritance and so do browser font size settings.
Em can be very confusing due to nesting and is therefore not a good unit of measurement for font-sizes. For font-sizes, it’s generally better to use rem because the size always refers back to the root.
Rem
How do you determine the px value when using rem? This is best explained using a simple example. Let’s say HTML font-size is set to 10px and the paragraph font-size is set to 1.4rem. Since 1.4rem * 10px = 14px, this means the paragraph’s font size is computed as 14px. Setting a root font-size of 10px is a common practice when using rems since you can quickly convert pixel to rem by dividing the number by 10. However, setting the base font-size in px is still bad for user experience and web accessibility since it prevents the users from affecting the root element’s font size.
A better approach is to set the root HTML font-size as a percentage of the user’s default browser font-size (usually 16px). This is typically done by setting the HTML font-size to 62.5% since 62.5% of 16px is 10px. As a result, 1.4rem is still 14px. If the user’s default browser font-size is changed to, for example, 20px, 1.6rem would now equal 20px.
Practical applications
Different web designers have different preferences when it comes to which unit of measurement to use for their web design projects. Below are some general recommendations to keep in mind when deciding among the three units of measurements:
- Use em units for sizing that should scale depending on the font size of an element other than the root. For example, margin, padding, width, and height should be in em, when used on elements with non default font sizing. When using em, be sure to set the font size of the element they’re used on in rem to preserve scalability but avoid the problem caused by inheritance.
- Use rem for fonts. In general, we don’t want font sizes to scale based on any element other than the root, with only a few exceptions. For example, when you have second level menu items that depend on the font size of the first level menu items then you should use em for fonts. Also, use em for font icon used inside a button, where the icon’s size should relate to the button’s font size.
- Use rem for elements that scale depending on browser font size setting. This is basically everything (most height, most width, most padding, most margin, most border width, most font sizes, most shadows).
- Use em for media queries. Check out this blog post on why em is better for media queries.
- Don’t use em or rem for multi column layout width. Instead, use percentages.
Px, em, and rem are the most commonly used units of measurement in CSS. Knowing the difference among them and be able to apply them correctly is essential to web design and development.
