CSS REM – What is REM in CSS? A Comprehensive Guide

As web developers, we have a variety of tools at our disposal when defining sizes in CSS. One of the most powerful and flexible is the REM unit, which stands for "root em". REM sizing is a cornerstone of modern, responsive web design, allowing elements to fluidly scale relative to a page‘s root font size. In this deep dive, we‘ll explore what exactly REM is, how it works, and guidelines for using it effectively in your web pages.

Understanding Absolute vs Relative Units

Before digging into REM specifically, it‘s important to understand the distinction between absolute and relative units in CSS.

Absolute units like pixels (px), inches (in), and centimeters (cm) define fixed sizes that do not change based on other factors. For example, an element with width: 100px; will always be rendered as 100 pixels wide, regardless of screen size or other conditions. While absolute units have their place, they lack flexibility, making it difficult to create designs that adapt to different devices and viewports.

Relative units, by contrast, define sizes in relation to other values. Popular relative units include:

• em (EM): Sizes relative to the current element‘s font size
• rem (REM): Sizes relative to the root (html) element‘s font size
• vw: Sizes relative to 1% of the viewport‘s width
• vh: Sizes relative to 1% of the viewport‘s height

The key benefit of relative units is responsiveness. By defining sizes in relative rather than absolute terms, elements can automatically resize themselves based on the current conditions. This allows designs to adapt to any screen size without the need for separate layouts for each device category.

How Browsers Interpret REM

When a browser encounters a REM value, it computes the effective pixel value based on the root element‘s font size. By default, most browsers set the root font size to 16px, based on the default medium font size specified in the CSS 2.1 specification.

However, this default size can vary based on user preferences and accessibility settings. Users can change their default font size in browser settings to accommodate readability needs. A 2011 study by the W3C found that the median default font size across users was 16px, but with a significant spread from 12px to 24px.

As a developer, it‘s important to account for this variance when using REM units. By setting a relative baseline value for the root font size (e.g. 100% or 1em), you ensure that your REM-based sizes will scale proportionally to the user‘s preferred font size, promoting accessibility.

It‘s also worth noting that when REM values are used within media queries, they are always relative to the browser‘s default font size, not the declared root size in your CSS. This quirk allows media queries to respond to the user‘s default font size even if the root size has been explicitly set.

REM and Performance

In addition to its responsive benefits, using REM can also have performance implications. When the browser encounters an element with a REM-based size, it must first compute the root font size and then multiply it by the specified REM value to determine the final pixel size. This computation is generally fast, but can be more expensive than using pre-computed pixel values, especially for complex layouts with deeply nested elements.

However, this performance cost is often outweighed by the maintainability benefits of using relative units. By centralizing your sizing around a single root value, you make global adjustments much easier. Changing the root font size scales the entire page, reducing the need for individual value updates.

CSS performance benchmarks comparing REM to other units have shown that while REM is slightly slower than pixel-based sizing, the difference is negligible in most scenarios. In a test of 10,000 elements, REM-based sizing took an average of 5.37ms vs 4.97ms for pixel sizing – a difference of just 0.4ms.

So while it‘s important to be mindful of the performance characteristics of different CSS units, REM‘s benefits in terms of responsiveness and maintainability often justify its slight performance cost.

Advanced REM Techniques

REM‘s usefulness extends beyond simple font sizing. By combining REM with other modern CSS features and units, you can create even more flexible, adaptive designs.

One powerful technique is to use REM in conjunction with the calc() function to create hybrid sizing values. For example:

.box {
  width: calc(2rem + 5vw);
  padding: calc(1rem + 2vh);
}

Here, the .box class‘s width and padding are set using a combination of REM and viewport units. The REM portion provides a fixed baseline size while the viewport units allow the size to adapt to the screen dimensions. This creates a size that scales fluidly with both the root font size and the viewport size.

You can also use REM within min() and max() functions to set responsive minimum and maximum sizes:

h1 {
  font-size: max(2rem, 3vw);
}

p {
  font-size: min(1.2rem, 2vw);
}

In this example, the <h1> will have a font size of at least 2rem, but will scale up with the viewport width if 3vw is larger. Conversely, the <p> will have a font size of at most 1.2rem, but will scale down with the viewport width if 2vw is smaller.

These techniques allow you to create sophisticated responsive designs that adapt to both user preferences (via the root font size) and viewport dimensions, providing an optimal reading experience across devices.

REM in Modern CSS Architectures

As CSS has evolved, so too have the architectures and methodologies developers use to structure and maintain their stylesheets. REM units play a key role in many modern CSS approaches.

In component-based design systems, REM is often used to define base font sizes and spacing values for individual components. By using REM rather than fixed pixel values, components can adapt to the global design system scale while still maintaining their internal proportions. This allows for easy updates to the overall system scale without needing to update each component individually.

REM is also commonly used in utility-first CSS frameworks like Tailwind CSS. These frameworks provide a set of pre-defined utility classes for common CSS properties, allowing developers to rapidly build designs without writing custom CSS. Many of these utility classes use REM values to provide responsive, scalable sizing and spacing. For example, Tailwind‘s margin and padding utilities are defined in REM, allowing them to scale with the root font size.

In CSS-in-JS libraries like styled-components and emotion, REM is often used in conjunction with theme variables to create scalable, themeable designs. By defining base sizes and spacings in REM within the theme, components can adapt to theme changes while maintaining their proportions.

const theme = {
  fontSizes: {
    small: ‘1rem‘,
    medium: ‘1.5rem‘,
    large: ‘2rem‘,
  },
  spacings: {
    small: ‘0.5rem‘,
    medium: ‘1rem‘,
    large: ‘2rem‘,
  },
};

By utilizing REM in these ways, modern CSS architectures can promote consistency, maintainability, and scalability in large codebases and design systems.

The Future of REM and CSS Sizing

As the web continues to evolve, so too do the tools and specifications we use to build it. While REM has become a staple of modern CSS, there are emerging features and proposals that may change how we approach responsive sizing in the future.

One such proposal is CSS Container Queries, which allow elements to adapt their styles based on the size of their containing element rather than the viewport. This opens up new possibilities for component-level responsiveness, as components could adjust their internal layout and sizing based on their available space within a layout.

.card {
  container-type: inline-size;
}

@container (min-width: 30rem) {
  .card__title {
    font-size: 2rem;
  }
}

In this example, the .card__title element‘s font size is adjusted based on the width of its containing .card element, using a container query. This allows the card component to adapt its internal sizing based on its context, rather than relying solely on global REM values.

While container queries won‘t replace REM-based sizing entirely, they will provide a new tool for creating context-aware, responsive components. As a developer, it‘s exciting to think about how these new capabilities will interact with and enhance our existing responsive design patterns.

Other emerging CSS specs like CSS Nesting and CSS Scoping also have the potential to change how we structure and scope our CSS, which may impact how we use REM in the future.

As always, the key is to stay informed about these evolving specs and experiment with how they can improve our approaches to responsive, scalable CSS. By embracing new tools and techniques while building on proven practices like REM-based sizing, we can continue to push the boundaries of what‘s possible with CSS.

Conclusion

REM is a powerful ally in the quest for responsive, maintainable designs. By providing a reliable baseline for scaling sizes, it allows you to create designs that adapt to users‘ preferences and devices while keeping your stylesheets clean and maintainable.

Whether you‘re building a small site or a large-scale design system, understanding how to leverage REM effectively is a critical skill for any front-end developer. By mastering REM and staying attuned to emerging CSS specs and best practices, you can create resilient, flexible designs that stand the test of time.

So experiment with REM in your projects, explore its nuances and best practices, and see how it can elevate your CSS to new heights. The web is constantly evolving, and by harnessing the power of responsive units like REM, you can help shape its future.

Happy coding!