Rem Units in CSS: How to Understand and Use Them

Main Points

• Understanding rem Units: Learn about CSS rem units, which are based on the font size of the root element and let you set text sizes and spacing consistently across your UI.
• Comparing rem and em Units: Look at the differences between rem and em units in CSS. rem units are easier to use and more uniform when it comes to size, while em units can be more complicated when nesting is involved.
  Practical Uses and Accessibility: Learn how rem units can be used in responsive design, to scale documents, and to make the web more accessible by letting users choose their own text sizes.

What Do Rem Units Mean?

“Rem” stands for “root em” in CSS. It is a unit of measurement for the root element’s letter size. This means that 1rem is the same as the HTML element’s font size, which is 16px by default for most computers. Using rem can help you make sure that the font size and space are the same across your whole UI.

This is what the W3C specification says one rem unit is:

The number that was found for font-size on the root element. If you put the units in the font-size property of the root element, they will refer to the property’s original value.

Em Units vs. Rem Units

While rem units are based on the font size of the root element, em units are based on the font size of their own element. Because of this, they can have unintended effects. Let’s look at an example where we want groups to have a font size of 12px when the root font size is 16px by default:

html {font-size: 100%;}
ul {font-size: 0.75em;}

When we put one list inside another, the font size of the list inside it will be 75% of the size of its parent, which in this case is 9px. We can still get past this problem by doing something like this:

ul ul {font-size: 1em;}

We still need to keep a close eye on places where nesting gets even deeper, but this does the job.

You can do the following with rem units:

html {font-size: 100%;}
ul {font-size: 0.75rem;}

There is no longer a need for different declarations for the nesting cases since all the sizes are linked to the root font size.

Size of Fonts with Rem Units

Jonathan Snook was one of the first people to use rem units for font size. In May 2011, he wrote a piece called Font sizing with REM. It was hard for him, as well as many other CSS writers, to use em units in layouts that were too complicated.

IE versions from that time still had a lot of users, but they couldn’t zoom in on text that was measured in pixels. But, as we already saw, it’s easy to forget about stacking and get strange results with em units.

The biggest problem with using rem to change font sizes is that the values are hard to work with. With the base size set to 16px, let’s look at an example of some popular font sizes given in rem units:

• 10px is equal to 0.625rem
• 12px is the same as 0.75rem.
• 14px is the same as 0.875rem
• 16px is the same as 1rem.
• 18 pixels is equal to 1.125 inches
• 20px is equal to 1.25rem
• 24px is equal to 1.5rem
• 30px is the same as 1.875rem
• 32px is equal to 2rem

We can see that these numbers are not very useful for doing maths. Snook used a trick called “62.5%” because of this. This wasn’t a brand-new idea; it had been used with em units before:

body { font-size:62.5%; } /* =10px */h1 { font-size: 2.4em; } /* =24px */p { font-size: 1.4em; } /* =14px */li { font-size: 1.4em; } /* =14px? */

Since rem units are linked to the root element, Snook’s version of the answer is:

html { font-size: 62.5%; } /* =10px */body { font-size: 1.4rem; } /* =14px */h1 { font-size: 2.4rem; } /* =24px */

It was also important to think about the browsers that didn’t support rem. In this way, the code from above would have been written:

html {font-size: 62.5%;}
body {font-size: 14px;font-size: 1.4rem;}
h1 {font-size: 24px;font-size: 2.4rem;}

Even though this answer seems like a “golden rule,” some people say you shouldn’t just follow it without thinking. Harry Roberts writes about how he thinks rem units should be used. He thinks that the 62.5% approach makes math easier because font sizes in pixels are 10 times their values in rem, but it forces website developers to rewrite all the font sizes by hand.

Chris Coyier of CSS-Tricks has a third point of view. All three units we’ve seen so far are used in his answer. It’s set to px for the root size, rem for the modules, and em for the parts inside the modules. This method makes it easy to change the global size, which changes the size of the type in the modules. The content of the modules is scaled based on the size of the fonts in those modules. In The Power of em Units in CSS, Louis Lazaris talked about that later idea.

You can see how Chris would do things in the case below:

Learn everything you need to know about rem units in CSS, which are a relative size number that works well in all browsers, and how to use them correctly.

Using rems with breakpoints in media query

The idea of “optimal line length” and how it affects the reading experience is linked to the use of em or rem units in media queries. Size Matters: Balancing Line Length And Font Size In Responsive Web Design is a full study on web typography that was released by Smashing Magazine. The article tells us a lot of interesting things, like how long a line should be: between 45 and 75–85 characters (including spaces and punctuation), with 65 being the “ideal” length.

We can control the flow of text for a single column of information in a mobile-first way by assuming that 1rem = 1character:

.container {width: 100%;}
@media (min-width: 85rem) {.container {width: 65rem;}}

One interesting thing about rem and em units is that when they are used in media queries, they always have the same value: 1rem = 1em = browser-set letter size. In the media query spec (emphasis added), the reason for this behaviour is given:

First, we have a element in HTML where we will write the viewport’s width:

Document width: <span></span>px



Next, we have two media queries, one with rem units and the other with em units (so that it's easy to use Sass):

Last but not least, we use jQuery to show the viewport width on the page and change the number when the window size changes:

html {font-size: 62.5%; /* 62.5% of 16px = 10px */
@media (min-width: 20rem) {/* 20*16px = 320px */background-color: lemonchiffon;font-size: 200%;/* 200% of 16px = 32px */}
@media (min-width: 30em) {/* 30*16px = 480px */background-color: lightblue;font-size: 300%; /* 300% of 16px = 48px */}}

To show that the changed root font size doesn’t change the numbers used for the media queries, we’ll start with the 62.5% trick. Let’s change the browser window’s width. The first media query starts to work at 320px (20 × 16px), and the second one starts to work at 480px (30 × 16px). The breakpoints were not affected by any of the font-size changes we said they would be. If you want to change the media query breakpoint numbers, you have to change the browser’s default font size.

Because of this, it doesn’t really matter if media query breakpoints are in em or rem units. The media searches for Zurb Foundation (which is at v6.5.3 at the time this was written) use em units.

How to Make Things More Accessible

As we’ve seen, rem units are great for usability because they let you scale based on the root font size. Developers at Google say that when you size text, you should use relative units.

A study by the people behind the Internet Archive shows that a lot of people change the usual font size in their browser settings. When you use rem and other relative units, you show that you value how people choose to browse the web.

Scaling Documents with rem Units

A third way to use rem units is to make parts that can be scaled up or down. It is possible to make an interface that grows or shrinks with the root font size by describing widths, margins, and padding in rem units. Let’s use a few cases to see how this thing works.

Using rem units to change the size of files Demo #1

We use media queries to change the root font size in this first case. Like in the last part, the goal is to make the reading experience fit the device being used. Since rem is used to describe padding and margin values for elements, the whole component can be scaled to fit any device.

Here’s one more:

In the second case, we use JavaScript to make the same change. This time, the user can change the interface’s size to suit his wants. You can use a database, cookies, or local files to store these custom values. Then you have the building blocks of a system that customises things based on what the user wants.

In conclusion

This is the end of our look at CSS rem units. There are clear benefits to using these units in our code, such as making it more responsive and scalable, making it easier to read, and giving us more freedom in describing components. Rem units are not a magic bullet, but if they are used correctly, they can fix a lot of problems that coders have been having for years. We must all work together to bring out the best in rems. Start your tools, try new things, and let us know what you find.

See for more on CSS size units:

• A Look at CSS Length Units
• The New Units for Relative Font Size in CSS3
• There are other CSS units besides the Power of em Units in Rem, of course. Check out our summary of CSS size units.

What You Need to Know About Rem in CSS

What’s the Difference Between CSS Rem and Em Units?

In CSS, the main difference between rem and em numbers is how they are used to figure out sizes. The em measure is based on the font-size of the element that is closest to it. If you nest items, each level may have a different font size based on the size of its parent, which is called compounding sizes. Rem, on the other hand, means “root em.” It only works relative to the root element (html), so it stays the same no matter where in your page you use it. This makes rem units more stable and makes it easier to work with big CSS files.

In CSS, how do I change pixels to rem units?

If you want to change pixels to rem, you first need to know what the base font size of your page is. For most browsers, this is 16px. You can find the rem number by dividing the target pixel value by the base font size. To give you an idea, if you want a font size of 24px, you would plug in 16px and get 1.5rem.

Can I use Rem Units for things besides font size?

No, rem units are only used for font-size. They can be used for any CSS property that needs a length number. Properties like width, height, spacing, margin, and line-height are part of this. Using rem units for these features can help make sure that the layout and spacing stay proportional on screens of different sizes.

Do all browsers work with Rem Units?

Yes, most current browsers, like Chrome, Firefox, Safari, Edge, and Internet Explorer 9 and up, can handle rem units. You can offer pixels instead, though, in case some older browsers don’t accept rem units.

Why is it good to use Rem Units in responsive design?

When it comes to adaptable design, rem units are very helpful. Since rem is linked to the root element, changing the font size of the root element will change the size of all elements set in rem. You can do this with media queries, which let you use different font sizes for different screen sizes. This makes your design flexible.

What Does It Mean for Accessibility to Use Rem Units?

Adding rem units to your website can make it much easier for people with disabilities to use. Some users may change the usual font size in their browser to make it easier to read. Because rem units are based on this base letter size, the layout and spacing of your website can change based on what the user wants, making the experience better for everyone.

How do I change styles that are set in Rem Units?

Using CSS specificity or the!important rule, you can change styles that are set in rem units. But you should only use these very rarely. Instead, organise your CSS so that you don’t need them very often.

Is it possible to use Rem Units with other units, like Pixels or Percentages?

It is possible to use rem units with other units, such as pixels or percentages. This can give you more options for how you plan things. You could use pixels for border lengths (which don’t need to change based on text size) and rem units for padding (which do).

How do I make Rem Units’ base font size?

The font-size feature on the root element (html) sets the base font size for rem units. To set the base font size to 10px, for example, you would type: html { font-size: 10px; }. After that, all rem units will be based on this size.

What are the best ways to use rem units in CSS?

Setting a reasonable base font size on the root element, using rem units for properties that need to scale with text size, giving older browsers pixel fallbacks, and testing your design at different font sizes to make sure it stays accessible and looks good are some of the best ways to use rem units in CSS.