Rem in CSS: Understanding and Using rem Units

Share this article

Rem in CSS: Understanding and Using rem Units

Gain an in-depth understanding of rem units in CSS, a relative sizing unit with excellent browser support, and learn how to use them effectively.

Key Takeaways

  1. Understanding rem Units: Learn about CSS rem units, which are relative to the root element’s font size, offering a consistent approach to font sizing and spacing across your UI.
  2. Comparing rem and em Units: Explore the differences between rem and em units in CSS, with rem providing a simpler, more consistent sizing method that avoids the complications of nesting associated with em units.
  3. Practical Applications and Accessibility: Discover the practical uses of rem units for responsive design, scaling documents, and ensuring web accessibility by allowing users to adjust font sizes to their preference.

What Are rem Units?

In CSS rem stands for “root em”, a unit of measurement that represents the font size of the root element. This means that 1rem equals the font size of the html element, which for most browsers has a default value of 16px. Using rem can help ensure consistency of font size and spacing throughout your UI.

According to the W3C spec the definition for one rem unit is:

Equal to the computed value of font-size on the root element. When specified on the font-size property of the root element, the rem units refer to the property’s initial value.

Rem Units vs. Em Units

The difference between rem units and em units is that em units are relative to the font size of their own element, not the root element. As such they can cascade and cause unexpected results. Let’s consider the following example, where we want lists to have a font size of 12px, in the case where the root font size is the default 16px:

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

If we have a list nested inside another list, the font size of the inner list will be 75% of the size of its parent (in this case 9px). We can still overcome this problem by using something along these lines:

ul ul {font-size: 1em;}

This does the trick, however we still have to pay a lot of attention to situations where nesting gets even deeper.

With rem units, things are a simpler:

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

As all the sizes are referenced from the root font size, there is no more need to cover the nesting cases in separate declarations.

Font Sizing with Rem Units

One of the pioneers of using rem units for font sizing is Jonathan Snook with his Font sizing with REM article, back in May, 2011. Like many other CSS developers, he had to face the problems that em units bring in complex layouts.

At that time, older versions of IE still had large market shares and they were unable to zoom text that was sized with pixels. However, as we saw earlier, it is very easy to lose track of nesting and get unexpected results with em units.

The main issue with using rem for font sizing is that the values are somewhat difficult to use. Let’s see an example of some common font sizes expressed in rem units, assuming, of course, that the base size is 16px:

  • 10px = 0.625rem
  • 12px = 0.75rem
  • 14px = 0.875rem
  • 16px = 1rem (base)
  • 18px = 1.125rem
  • 20px = 1.25rem
  • 24px = 1.5rem
  • 30px = 1.875rem
  • 32px = 2rem

As we can see, these values are not very convenient for making calculations. For this reason, Snook used a trick called “62.5%“. It was not a new discovery, by any means, as it was already used with em units:

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

As rem units are relative to the root element, Snook’s variant of the solution becomes:

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

One also had to take into account the other browsers that didn’t support rem. Thus the code from above would have actually been written this way:

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

While this solution seems to be close to the status of a “golden rule”, there are people who advise against using it blindingly. Harry Roberts writes his own take on the use of rem units. In his opinion, while the 62.5% solution makes calculation easier (as the font sizes in px are 10 times their rem values), it ends up forcing developers to explicitly rewrite all the font sizes in their website.

A third view comes from Chris Coyier of CSS-Tricks. His solution makes use of all three units we encountered so far. He keeps the root size defined in px, modules defined with rem units, and elements inside modules sized with em. This approach makes easier to manipulate global size, which scales the type in the modules, while the module content is scaled based on the module font size itself. Louis Lazaris discussed that later concept in The Power of em Units in CSS.

In the example below you can see how Chris’s approach would look:

See the Pen One Method for Using ems and rems in CSS by SitePoint (@SitePoint) on CodePen.

In practice, there are major frameworks such as Bootstrap 4 and the Material Design guidelines that use rem units for sizing text content.

A special mention goes to Material-UI, a very popular collection of React components. Not only are they sizing text the same way, but also offer a mechanism to implement the “10px simplification” we mentioned above.

Another recent project, Every Layout, combines em and rem units in a very inspired way. It comes closest to Chris Coyier’s model outline earlier and it uses em units to emphasize inline elements like SVG icons, spans or other similar elements.

As you can see, there is no “silver bullet” solution. The combinations possible are limited only by the imagination of the developers.

Using rems with Media Query Breakpoints

The use of em or rem units inside media queries is closely related to the notion of “optimal line length” and how it influences the reading experience. Smashing Magazine published a comprehensive study on web typography called Size Matters: Balancing Line Length And Font Size In Responsive Web Design. Among many other interesting things, the articles gives an estimate for optimal line length: between 45 and 75-85 characters (including spaces and punctuation), with 65 the “ideal” target value.

Using a rough estimate of 1rem = 1character, we can control the flow of text for a single column of content, in a mobile-first approach:

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

There is, however, one interesting detail about rem and em units when used as units for media queries: they always keep the same value of 1rem = 1em = browser-set font size. The reason for this behavior is explained in the media query spec (emphasis added):

Relative units in media queries are based on the initial value, which means that units are never based on results of declarations. For example, in HTML, the em unit is relative to the initial value of font-size, defined by the user agent or the user’s preferences, not any styling on the page.

Let’s see a quick example of this behavior:

View Media Query Demo on CodePen

First, in our HTML, we have a <span> element where we will write the width of the viewport:

Document width: <span></span>px

Next we have two media queries, one with rem units and the other with em units (this uses Sass for simplicity):

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 */}}

Finally, we use a bit of jQuery to display the viewport width on the page, updating the value when the window size changes:

$('span').text($(window).width());
$(window).on('resize', function(e) {$('span').text($(window).width());});

We begin with the 62.5% trick to show that the modified root font size does not have any effect on the values used for the media queries. As we change the width of the browser window we can see that the first media query kicks in at 320px (20 × 16px) while the second one becomes active at 480px (30 × 16px). None of the font-size changes we declared had any effect on the breakpoints. The only way to change the media query breakpoint values is to modify the default font size in the browser settings.

For this reason, it doesn’t really matter if we use em or rem units for media query breakpoints. Zurb Foundation (currently at v6.5.3 at the moment this was written) makes use of em units in the media queries.

The Quest for Accessibility

We’ve seen above that the ability to scale based on the root font size makes rem units very useful for accessibility. Google developers make the recommendation to use relative units for text sizing.

There is an empirical study run by the people behind the Internet Archive showing that there is a significant amount of users who change their default font size in the browser settings. By using rem and other relative units you respect the users’ decisions about the way they want to browse the web.

Using rem Units for Scaling Documents

A third use we can find for rem units is to build scalable components. By expressing widths, margins, and padding in rem units, it becomes possible to create an interface that grows or shrinks in tune with the root font size. Let’s see how this thing works using a couple of examples.

Using rem Units for Scaling Documents Demo #1

In this first example, we change the root font size using media queries. Just like in the previous section, the purpose is to customize the reading experience for the device used. As element padding values and margins are expressed using rem, the entire component scales with the device size.

Let’s see another:

See the Pen Dynamic Sizing of Modules with Rem Units by SitePoint (@SitePoint) on CodePen.

In the second example we do the same alteration using JavaScript. This time the user has control over the size of the interface, adjusting it to fit his needs. Add a way to store these custom values (using either a database, cookies or local storage) and you have the base of a personalization system based on user preferences.

Conclusion

We end here our encounter with CSS rem units. It is obvious that there are many advantages in using these units in our code, like responsiveness, scalability, improved reading experience, and greater flexibility in defining components. Rem units not a universal silver bullet solution but, with careful deployment, they can solve many problems that have irked developers for years. It’s up to each one of us to unlock the full potential of rems. Start your editors, experiment and share your results with the rest of us.

For more on CSS sizing units, see:

Rem is not the only CSS unit available, of course. Check out our Overview of CSS Sizing Units.

FAQs About Rem in CSS

What Is the Difference Between Rem and Em Units in CSS?

The main difference between rem and em units in CSS lies in their reference points for calculating sizes. The em unit is relative to the font-size of its closest parent element. If you nest elements, each level can potentially have a different font-size based on its parent’s size, leading to compounding sizes. On the other hand, rem stands for “root em”. It is only relative to the root element (html), which makes it consistent regardless of where you use it in your document. This makes rem units more predictable and easier to manage in large CSS files.

How Do I Convert Pixels to Rem Units in CSS?

To convert pixels to rem units, you need to know the base font size of your document, which is typically 16px (the default size for most browsers). The conversion formula is: target pixel value / base font size = rem value. For example, if you want a font size of 24px, the equivalent in rem would be 24px / 16px = 1.5rem.

Can I Use Rem Units for Properties Other Than Font-Size?

Yes, rem units can be used for any CSS property that requires a length value, not just font-size. This includes properties like width, height, padding, margin, and line-height. Using rem units for these properties can help maintain proportional spacing and layout across different screen sizes.

Are Rem Units Supported in All Browsers?

Yes, rem units are widely supported in all modern browsers, including Chrome, Firefox, Safari, Edge, and Internet Explorer 9 and above. However, for older browsers that do not support rem units, you can provide a fallback in pixels.

How Does the Use of Rem Units Benefit Responsive Design?

Rem units are extremely beneficial for responsive design. Since rem is relative to the root element, changing the root font size allows you to adjust the size of all elements defined in rem. This can be done within media queries, allowing different font sizes for different screen sizes, thus making your design responsive.

What Is the Impact of Using Rem Units on Accessibility?

Using rem units can significantly improve the accessibility of your website. Some users may adjust their browser’s default font size for readability. Since rem units are relative to this base font size, it allows the layout and spacing of your website to adjust according to the user’s preferences, improving the overall user experience.

How Do I Override Styles Defined in Rem Units?

You can override styles defined in rem units by using CSS specificity or the !important rule. However, it’s recommended to use these sparingly and instead structure your CSS in a way that minimizes the need for overrides.

Can I Use Rem Units in Combination with Other Units Like Pixels or Percentages?

Yes, rem units can be used in combination with other units like pixels or percentages. This can provide more flexibility in your designs. For example, you might use pixels for border widths (which don’t need to scale with text size) and rem units for padding (which does).

How Do I Set the Base Font Size for Rem Units?

The base font size for rem units is set on the root element (html) using the font-size property. For example, if you want the base font size to be 10px, you would use: html { font-size: 10px; }. All rem units will then be relative to this size.

What Are the Best Practices for Using Rem Units in CSS?

Some best practices for using rem units in CSS include setting a sensible base font size on the root element, using rem units for properties that need to scale with text size, providing pixel fallbacks for older browsers, and testing your design at different font sizes to ensure it remains accessible and visually balanced.

Adrian SanduAdrian Sandu
View Author

Adrian is a UX Developer, creator, and speaker living in Iasi, Romania. He believes happiness is the true measure of success and he wants to help other developers achieve their dreams. In the off time, he loves playing video games and tinker with custom PC builds.

css remcss typographyem unitsgitCSlearn-advanced-cssLouisLrem units
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week