What is rem in CSS? rem Unit Font Size, Padding, Height, and More

In modern web development, creating responsive designs that look great on any device and are accessible to all users is more important than ever. The rem unit in CSS is a powerful tool for achieving these goals.

As an experienced full-stack developer, I‘ll explore what the rem unit is, how it differs from other units, and share some tips and best practices for using it effectively in your own projects. By the end of this guide, you‘ll have a solid understanding of the rem unit and how it can take your CSS skills to the next level.

What is the rem unit?

The rem unit, which stands for "root em", is a relative unit of length in CSS. It‘s part of the family of relative units, which also includes em, ex, ch, and others.

What makes the rem unit special is that it‘s always calculated relative to the font size of the root element, which is the tag in HTML. This differs from the similar em unit, which is calculated relative to the font size of the parent element.

Here‘s a quick example to illustrate:

html {
  font-size: 16px;
}

div {
  font-size: 1.5rem; /* Equivalent to 24px (16 * 1.5) */
}

In this case, the font size of the div element will be calculated as 1.5 times the root element‘s font size. With a root font size of 16px (the common default), this evaluates to 24px.

How rem works

By default, most web browsers set the root font size to 16px. But this value can be changed by setting an explicit font-size property on the element:

html {
  font-size: 20px;
}

Now, 1rem will be equivalent to 20px throughout the document. This makes it easy to scale the entire layout up or down proportionally just by modifying the root font size.

Here‘s how some common rem values would be calculated with a root font size of 20px:

• 1rem = 20px
• 2rem = 40px
• 0.5rem = 10px
• 1.25rem = 25px

As you can see, the rem unit scales consistently regardless of the font size of any parent elements. This makes it very predictable to work with.

To demonstrate this scaling in action, let‘s compare how the em and rem units behave when the root font size changes:

html { 
  font-size: 16px;
}

.parent {
  font-size: 1.5rem; /* Equivalent to 24px */
}

.child {
  font-size: 2em; /* Equivalent to 48px (2 * 24px) */
}

Now let‘s double the root font size:

html {
  font-size: 32px;
}

With this change, the .parent element will now have a calculated font size of 48px (1.5 32px). However, the .child element will have a calculated font size of 96px (2 48px), since it scales relative to its parent‘s font size.

If we instead used rem for the .child element:

.child {
  font-size: 2rem; /* Equivalent to 64px (2 * 32px) */
}  

Its font size would be calculated as 64px, since it scales only based on the root font size. This demonstrates the key difference and advantage of using the rem unit for consistent scaling.

Benefits of using rem

There are several key benefits to using the rem unit in your CSS:

1. Responsive design: By basing your layout sizes and spacing on the root font size using rem, your entire design scales proportionally just by modifying the font-size of the element. This makes it much easier to create responsive layouts that adapt to different screen sizes and devices.

2. Accessibility: Vision-impaired users often scale up the default font size in their browser to improve readability. By building your layout with the rem unit, it will scale up accordingly to match their preferred font size, making your site more accessible.

3. Consistency: Using a relative unit like rem for sizes throughout your stylesheet promotes consistency in your design. Instead of scattering fixed pixel values everywhere, you can define a sizing scale in rem that will keep your spacing and proportions consistent as the layout scales.

Using rem for font sizes

One of the most common use cases for the rem unit is setting font sizes. Instead of using fixed pixel values, you can define your font sizes relative to the root element using rem.

A good practice is to set a base font size on the element using rem:

body {
  font-size: 1rem; /* Equivalent to the root font size */
}

Then, you can define the font sizes for your headings and other elements as multiples of this base size:

h1 {
  font-size: 2.5rem;
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.5rem;
}

p {
  font-size: 1rem;
}

By using rem units here, your font sizes will scale proportionally if the root font size changes, maintaining the visual hierarchy and readability of your content.

Using rem for spacing

In addition to font sizes, the rem unit is very useful for setting spacing in your layout, such as padding, margins, and sizing of elements.

For example, you can use rem to define consistent spacing between sections of your page:

section {
  margin-bottom: 2rem;
}

Or to set padding inside an element:

.card {
  padding: 1.5rem;
}

By using rem instead of fixed pixel values for these properties, your spacing will scale proportionally with the font size, maintaining consistent proportions in your design.

You can also use rem to set the width and height of elements:

.avatar {
  width: 5rem;
  height: 5rem;
}

This will create an avatar image that scales with the font size, which can be useful for maintaining consistent sizing and aspect ratios across the responsive versions of a layout.

Using rem for media queries

Media queries allow you to apply different CSS styles based on the characteristics of the user‘s device, such as screen width. You can use rem units in your media query breakpoints to create responsive layouts that scale with the font size.

For example:

/* Base styles */
body {
  font-size: 1rem;
}

/* Styles for screens wider than 50rem */
@media (min-width: 50rem) {
  body {
    font-size: 1.25rem;
  }
}

In this example, the base font size is set to 1rem (16px by default). Then, at screen widths over 50rem (800px with a default font size), the font size is bumped up to 1.25rem (20px). This approach allows your breakpoints to scale with the font size, keeping them proportional and maintaining the integrity of your layout.

Tips for using rem effectively

Here are a few tips to keep in mind when using the rem unit in your projects:

1. Set a default font size on the element in pixels. This establishes the base value that 1rem will equal throughout your stylesheet. A common choice is 16px, which matches the default font size in most browsers.

2. Use a consistent sizing scale for your rem values. This could be a modular scale, where each size is a multiple of a base value, or a simple scale like 8pt, where sizes are multiples of 8. Consistent sizing helps create visual harmony in your designs.

3. Use rem for all sizes to keep everything relative to the root font size. This includes font sizes, padding, margins, and element sizes. Avoid mixing rem with other units like em or px, which can lead to unexpected results.

4. Test your layout at different default font sizes to ensure the scaling works as intended. You can simulate this by changing the font size in your browser‘s settings or using the developer tools to modify the root font size.

5. Keep an eye on the overall scale and proportions of your layout as it scales. While rem makes it easy to scale everything proportionally, you may need to adjust certain values at different breakpoints to maintain readability and usability.

Browser support for rem

The rem unit is supported in all modern browsers, including Chrome, Firefox, Safari, Edge, and Internet Explorer 9 and above.

For older browsers like Internet Explorer 8 and below that don‘t support rem, you can provide fallback values using pixels. Here‘s an example:

.element {
  font-size: 16px; /* Fallback for old browsers */
  font-size: 1rem; /* Modern browsers */
}

Browsers that don‘t understand the rem unit will ignore that declaration and use the pixel value instead, ensuring your layout remains usable for all users.

Rem vs other units

While the rem unit is a versatile choice for many situations, it‘s not the only unit available in CSS. Here‘s a quick comparison of rem with some other commonly used units:

• px (pixels): An absolute unit that‘s not affected by the font size. Pixels are useful for creating fixed-size elements like borders or when you need precise control over sizing. However, they don‘t scale with the font size, making them less flexible for responsive designs.

• em: A relative unit that‘s calculated based on an element‘s font size. If used on a child element, it will scale relative to the parent‘s font size. The em unit is useful for sizing elements within a local context, like padding inside a button. However, the reliance on parent font sizes can sometimes lead to unexpected sizing.

• % (percent): A relative unit that scales based on the size of an element‘s containing block. Percentages are commonly used for widths and heights of containers. They‘re useful for creating fluid layouts but can be tricky to work with for typography and spacing.

• vh/vw (viewport units): Relative units that are calculated based on the size of the viewport (the visible area of the page). 1vh equals 1% of the viewport height, and 1vw equals 1% of the viewport width. These units are useful for creating full-width or full-height elements but don‘t scale with the font size.

Each unit has its own strengths and use cases, and you‘ll likely find yourself using a combination of them in your projects. The key is understanding how each one behaves and choosing the right tool for the job.

Conclusion

The rem unit is a powerful tool in your CSS toolbox for creating flexible, scalable, and accessible layouts. By sizing elements relative to the root font size, you can build designs that adapt gracefully to different devices, screen sizes, and user preferences.

To get started with rem, set a base font size on your root element, then use rem units to size your typography, spacing, and layout elements. Keep an eye on the overall scale and proportions as your layout scales, and don‘t be afraid to make adjustments at different breakpoints to maintain usability.

Remember, the goal is to create a design that looks great and works well for all users, regardless of how they view your site. By mastering the rem unit and using it effectively in your projects, you‘ll be well on your way to achieving that goal.