What Are Rem Units? (& How to Use Them in CSS)

Of the many HTML styling options that CSS enables, font size is a crucial property — especially when it comes to display responsiveness. Moreover, there are several ways to dictate font size using CSS. Of these, rem units prove to be exceptionally flexible and relatively intuitive.

Rem (short for “root-em”) units dictate an element’s font size relative to the size of the root element. By default, most browsers use a font size value of 16px. So, if the root element is 16px, an element with the value 1rem will also equal 16px. Therefore, rem units are useful for scaling CSS elements in relation to the size of the root element — even if you don’t know what the default font size will be.

In this article, we’ll review what rem units are and how to use them effectively for your styling needs.

What is em CSS?

For responsive web pages, the size of web elements changes with the size of the viewport. CSS enables you to declare font size using absolute units like pixels (px) or relative units like percentages, em, or rem units.

As pixels are absolute units, they do not scale with the viewport. So 1px represents one unit on a physical device, regardless of the device size. As a result, creating responsive websites is often easier using a relative unit like percentage, em, or rem.

Percentages are relative to a parent element or a property in that element. They are commonly used to set an element’s width and height.

Em units are relative specifically to the parent element, enabling an element to scale in the context of the parent. Consider a p tag nested in an article element with a font size of 18px:

Assigning the p element a font size of 2em gives it an actual size of 36px — twice the value of the article element’s font.

What is rem CSS?

Similar to em units, rems are relative units. However, they reference the root element — typically the HTML element itself. Most browsers set the default font size to 16px. However, you can change this. For instance, to change the font size to 14px, you would add the following to your stylesheet:

Once you set the size of the HTML element, you can dictate the sizes of all the other elements that use rem units as a percentage of this size (expressed as a decimal).

For example, assuming the default font size of the root object is 16px, you would style a paragraph with a 12px font size using 0.75rem because 12 ÷ 16 = 0.75:

Making these calculations each time you want to convert a rem unit to pixels can become frustrating rather quickly. Consider the following values obtained by converting 14px, 18px, and 20px to rem units:

• 14px = 0.875rem
• 18px = 1.125rem
• 20px = 1.25rem

These values aren’t easy to memorize, and you may have to fish out your calculator more often than you’d like to confirm them.

Fortunately, the 62.5% trick aims to solve these issues. By setting the root font size to 62.5% of its default, the reference value usually becomes 10px, making the above values 1.4rem, 1.8rem, and 2.0rem, respectively.

But why set your root font size as 62.5% instead of 10px?

One of the principal benefits of relative units is their scalability regardless of the physical display size. Changing the root value using an absolute unit means that the content will be difficult to read or navigate. The 62.5% trick ensures that developers can easily scale values without worrying about the type of device used to view the content.

Implementing the 62.5% trick in your CSS would appear as follows:

As you can see, calculating the rem units using a base of 10px makes things easier. However, there’s a chance that the 62.5% trick can increase your workload. If your body is supposed to have a size of 12px, you will end up having to set most of your module or element font sizes to 12px. In that scenario, you could have instead set the body size to 12px. So, keep this in mind when using this trick.

Using Rem in Media Queries

The media query specification states that media queries are (almost) always independent of any internal styling in the document.

Therefore, rem units used in media queries depend on the browser’s default size or the size set by the user in the browser settings — not the size specified in the stylesheet.

This means the 62.5% trick does not work in the media query block, and 1rem inside will be equal to 16px or the value provided by a user.

Take this example with a media breakpoint of 32rem:

The breakpoint here will not be 32 × 10px = 320px, but 32 × 16px = 512px.

Why should you use rem units?

As mentioned before, rem units reference the size of the root element. Since a user can set the default size of this element from their browser settings, the webpage can scale to match a user’s preference.

Using absolute units like pixels, however, creates accessibility barriers. Pixels override the document’s root font size, meaning the user’s preferences are ignored. Therefore, use rem units for any scalable elements where possible.

We're committed to your privacy. HubSpot uses the information you provide to us to contact you about our relevant content, products, and services. You may unsubscribe from these communications at any time. For more information, check out our Privacy Policy.

Free Guide: 25 HTML & CSS Coding Hacks

Tangible tips and coding templates from experts to help you code better and faster.

• Coding to Convention
• Being Browser-Friendly
• Minimizing Bugs
• Optimizing Performance

Download for free

Loading your download form

You're all set!

Click this link to access this resource at any time.

Access now

Learn more

Rem Units vs. Percentages

Percentages are typically best used for defining the widths of elements, as they provide a more flexible solution than rem units. This is especially true in a multi-column layout. Setting the widths of the columns in percentages ensures they always scale with the viewport’s size.

For example, in a two-column layout, you can use percentages to subdivide the container:

This allows the columns to scale proportionally with the viewport size.

Rem vs. Em Units

While rem units are relative to the root element, em is relative to the parent element.

To illustrate how it works, consider the parent and child font sizes shown below. The parent’s size is in pixels and the child’s size is in em units.

The child’s actual font size is 2 × 18px = 32px.

If the parent does not have a set font size, em will check the next parent in the DOM tree — all the way to the root element — until it finds a unit to reference.

When em is used on measurement values other than the font size, its value is derived from the font size of that element. Here is an example of an h1 using em units nested in a div element:

Here, the h1 font size is 24px (2 × 12px). The padding value is then calculated from this value as 1.5 × 24px = 36px.

The problem with em is that the font size compounds when you nest elements.

Take this example of a nested list styled with CSS:

When you use em units in this way, the font sizes of the list items compound, increasing with each nested level:

You can avoid this effect with rem units, as the font size of all the elements in the document is derived from the font size of the HTML element.

Em units are useful when the size of a child element needs to be proportional to the parent element. If you choose to use em units, they are typically most suited to elements with non-default font sizing.

For example, when styling a navigation component, you want its padding, margin, width, and height elements to scale with it. You can use em units on these properties and rem units for the font size.

Using Rem, Em, and Percentages in CSS

Rem units allow you to set sizes relative to the root element. Therefore, they are different from other sizing alternatives like em units — which depend on a parent element — or percentages, whose real values depend on the property on which they are used.

When building accessible websites, you should avoid using pixels to size font elements. Their absoluteness means they are not scalable. Instead, opt for rems, ems, and percentages. Use rem units to create elements that scale depending on user settings and em units for elements that should scale depending on their parent elements. To create fluid layouts, use percentages.

Of course, there are exceptions to each rule. Make use of trial and error as well as your best judgment, and prioritize scalability and accessibility in your web design.