Why You Should Use rem to Set Font Size in CSS: An Expert Guide

As a full-stack developer and professional coder, I‘ve worked on numerous websites and applications over the years. One thing I‘ve learned is that typography is a critical component of any design, and how you size your text can have a big impact on both the aesthetics and the usability of your site.

In this in-depth guide, I‘ll make the case for why you should be using rem units to set font sizes in your CSS. I‘ll explain what rem is, how it differs from other units like pixels or em, and provide numerous examples and use cases to illustrate its benefits. By the end, you‘ll have a solid understanding of rem and how to use it effectively in your own projects.

The Rise of Responsive Design

Before diving into rem specifically, it‘s important to understand the broader context of responsive web design. In the early days of the web, most sites were designed with fixed widths and optimized for desktop screens. However, with the explosion of smartphones and tablets, that approach is no longer viable.

Consider these statistics:

• According to Statista, mobile devices generated 54.8% of global website traffic in the first quarter of 2021. (Source)
• Google reported in 2018 that more than 50% of search queries globally came from mobile devices. (Source)

Clearly, if your site isn‘t optimized for mobile devices, you‘re potentially alienating a huge portion of your audience. This is where responsive design comes in.

Responsive design is an approach that suggests that design and development should respond to the user‘s behavior and environment based on screen size, platform, and orientation. This means that your site should look and function well on a variety of devices, from small phone screens to large desktop monitors.

A key aspect of responsive design is typography. If your font sizes are too small on mobile devices, your text will be difficult to read. If they‘re too large on desktop screens, you‘re wasting valuable screen real estate. This is where relative units like rem come in.

Understanding Relative Units

In CSS, there are two types of units for specifying sizes: absolute units and relative units.

Absolute units, like pixels (px), points (pt), or inches (in), specify a fixed size regardless of the screen size or resolution. For example, if you set a font size of 16px, it will always render at 16 pixels tall, whether you‘re on a small phone or a large monitor.

Relative units, on the other hand, specify sizes relative to another value. The most common relative units for typography are:

• em: Relative to the font size of the element
• rem: Relative to the font size of the root element
• %: Relative to the size of the containing block

Of these, rem has emerged as the preferred unit for typography in modern web development. But to understand why, let‘s first look at how em units work.

The Problem with em Units

On the surface, em units seem like a good solution for responsive typography. 1em equals the font size of the current element, so if you set a font size of 1.5em, it will render at 1.5 times the current font size.

However, em units have a major drawback: they compound. Consider this example:

<div class="parent">
  <div class="child">
    <div class="grandchild">
      Hello, world!  
    </div>
  </div>
</div>

.parent {
  font-size: 1.5em;
}

.child {
  font-size: 1.5em; 
}

.grandchild {
  font-size: 1.5em;
}

In this case, the .grandchild element‘s font size will be 1.5 times the .child element‘s font size, which is itself 1.5 times the .parent element‘s font size. This means the .grandchild element will end up with a font size of 1.5 1.5 1.5 = 3.375 times the base font size!

This compounding effect can quickly lead to unreasonably large or small font sizes, especially with deeply nested elements. It also makes your CSS harder to reason about, as you have to mentally calculate the compounded sizes.

The Solution: rem Units

This is where rem units come in. rem stands for "root em", and is always relative to the font size of the root (html) element, regardless of where it‘s used in the document.

By default, browsers set the font size of the root element to 16px. This means that, by default, 1rem = 16px, 2rem = 32px, 0.5rem = 8px, and so on.

The key advantage of rem is that it doesn‘t compound like em does. Consider the same example from before, but with rem units:

<div class="parent">
  <div class="child">
    <div class="grandchild">
      Hello, world!
    </div>  
  </div>
</div>

.parent {
  font-size: 1.5rem;
}

.child { 
  font-size: 1.5rem;
}

.grandchild {
  font-size: 1.5rem;
}

In this case, each element will have a font size of 1.5 times the root font size, regardless of nesting. This makes your CSS much more predictable and easier to understand.

Setting the Root Font Size

Since rem units are always relative to the root font size, it‘s common to set an explicit font size on the html element. This effectively sets "1rem" equal to that value.

A popular technique is to set the root font size to 62.5%. This makes 1rem equal to 10px, which many find easier to work with mentally. Here‘s how it works:

html {
  font-size: 62.5%; /* 62.5% of 16px = 10px */
}

Now, if you want an element to have a font size of 18px, you can simply use 1.8rem (1.8 * 10px = 18px). This can make your CSS more intuitive and easier to reason about.

Accessibility and User Preferences

Another major benefit of rem units is that they respect user preferences for font sizes.

Some users, particularly those with visual impairments, may set their browser‘s default font size to a larger value to improve readability. If you use absolute units like pixels, your font sizes will remain fixed regardless of this setting. However, if you use rem units, your font sizes will scale proportionally to the user‘s preferred base size.

This is a key aspect of accessible web design. In fact, the Web Content Accessibility Guidelines (WCAG) 2.1 specifically call out resizable text as a criterion for accessibility:

1.4.4 Resize text: Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality. (Level AA) (Source)

Using rem units makes it much easier to meet this criterion, as your entire design will scale with the base font size.

Responsive Typography with rem

Another advantage of rem units is that they make responsive typography much simpler.

A common approach is to define a "base" font size for the body text, then use rem units to size headings and other text elements proportionally to that base. Here‘s an example:

html {
  font-size: 62.5%; 
}

body {
  font-size: 1.6rem; /* 1.6 * 10px = 16px */
}

h1 {
  font-size: 3.2rem; /* 3.2 * 10px = 32px */
}

h2 {
  font-size: 2.4rem; /* 2.4 * 10px = 24px */
}

p {
  font-size: 1.6rem; /* 1.6 * 10px = 16px */
}

With this setup, your entire typographic scale will be based on the root font size. This means you can easily adjust the scale for different screen sizes using media queries:

html {
  font-size: 50%; /* 1rem = 8px */
}

@media (min-width: 768px) {
  html {
    font-size: 62.5%; /* 1rem = 10px */
  }
}

@media (min-width: 1024px) {
  html {
    font-size: 75%; /* 1rem = 12px */
  }
}

In this example, the base font size (and thus the entire typographic scale) increases at larger screen sizes, ensuring readability across devices.

When to Use em Units

While rem is generally the best choice for font sizes, em units still have their place. They‘re particularly useful when you want an element‘s size to be relative to its own font size, rather than the root.

A common example is icon sizes. If you have an icon next to some text, you might want the icon to scale with the text. In this case, em is the perfect unit:

.icon {
  width: 1em;
  height: 1em;
}

No matter what the actual font size of the element is, the icon will always be a square with sides equal to the font size.

Another use case for em is for margins and padding. If you want these spaces to scale with the font size (which is often desirable for maintaining proportionality), em is the way to go:

.button {
  font-size: 1.6rem;
  padding: 0.5em 1em; /* padding scales with font size */
}

Potential Drawbacks of rem

While rem units are a powerful tool, they‘re not always the best choice for every situation.

One potential drawback is that they can be slightly more difficult to work with mentally, especially if you‘re not using a base font size of 10px. The mental math of converting, say, 1.6rem to 16px (assuming a root font size of 62.5%) can be a bit more challenging than just using 16px directly.

Another issue is that older browsers (particularly Internet Explorer 8 and below) don‘t support rem units. If you need to support these browsers, you‘ll need to provide fallbacks in pixels.

Finally, there may be certain design situations where you actually want elements to scale disproportionately to each other. In these cases, using a combination of rem and em units (or even absolute units like pixels) might make more sense.

Simplifying rem with CSS Preprocessors

If you find the mental math of rem units challenging, or if you want to make your CSS more maintainable, consider using a CSS preprocessor like Sass or Less.

These tools allow you to define variables for your font sizes, which can make your code more readable and easier to update. For example:

$base-font-size: 1.6rem;
$h1-font-size: 3.2rem;
$h2-font-size: 2.4rem;

body {
  font-size: $base-font-size;
}

h1 {
  font-size: $h1-font-size;
}

h2 {  
  font-size: $h2-font-size;
}

With this approach, you only need to update your font sizes in one place (the variable definitions) and the changes will propagate throughout your CSS.

Convincing Your Team to Use rem

If you‘re working on an existing project that uses pixels or em units for font sizes, convincing your team to switch to rem can be a challenge. Here are a few strategies that can help:

1. Demonstrate the benefits: Put together a presentation or demo showing how rem can make your CSS more maintainable, responsive, and accessible. Use real examples from your own codebase to make it more relatable.

2. Start small: Suggest using rem for a new feature or a small section of the site. This can help your team get comfortable with the unit without feeling overwhelmed.

3. Provide resources: Share articles (like this one!), tutorials, and documentation on rem with your team. The more they understand about how it works and why it‘s beneficial, the more likely they are to get on board.

4. Be patient: Change can be hard, and it may take some time for your team to fully adopt rem. Be patient, be supportive, and lead by example.

Additional Resources

If you want to learn more about rem units and responsive typography, here are some additional resources:

• Responsive Typography: The Basics by Oliver Reichenstein
• The EMs have it: Proportional Media Queries FTW! by Lyza Gardner
• A Pixel Identity Crisis by Scott Kellum
• Understanding and Using rem Units in CSS by Asha Laxmi

Conclusion

In this guide, we‘ve taken a deep dive into rem units and why they‘re the best choice for setting font sizes in CSS. We‘ve covered the problems with absolute units like pixels and the compounding issues of em units, and demonstrated how rem provides a simple, flexible, and accessible solution.

We‘ve also looked at some practical tips for using rem effectively, like setting a base font size, using media queries for responsive typography, and leveraging CSS preprocessors for more maintainable code.

Whether you‘re working on a new project or trying to update an existing one, switching to rem for your font sizes can make a big difference in the quality and maintainability of your CSS. As a full-stack developer and professional coder, I strongly recommend giving it a try.

Remember, the web is for everyone, and by using rem units, you‘re helping to ensure that your sites are accessible and usable for all your users, regardless of their device or preferences.

Happy coding!