Logo

Should I Use rem in My Websites? Here’s Why You Probably Should.

Web Design

Estimated reading time: 4 min read

using the correct web measurements is important thats why you should use rem in your web design. This is a picture of a person at a tool desk on a laptop.

If you’ve spent any time building websites—whether in Figma, WordPress, or writing raw HTML and CSS—you’ve probably encountered the age-old question: should I use rem in my websites instead of px?

The short answer? Yes, in most cases, you should.

In this post, we’ll break down exactly what rem is, why it’s important for modern web design, where to use it (and where not to), and how switching from px to rem can improve accessibility, scalability, and consistency across your site.

What is rem, and how is it different from px?

px stands for pixels. It’s an absolute unit of measurement. If you set a heading to 24px, it will be exactly 24 pixels tall—no matter what.

On the other hand, rem stands for “root em.” It’s a relative unit based on the root font size of the HTML document—usually 16px by default unless otherwise set in the CSS. So, 1rem = 16px (usually), and 1.5rem = 24px.

The key difference is this: rem scales with the user’s browser settings, whereas px does not.

Why Should I Use rem in My Websites?

Here’s why using rem instead of px is becoming the standard in modern web design:

1. Accessibility

One of the most important reasons to use rem is accessibility. Users with visual impairments may increase the base font size in their browser settings. When you use rem, your font sizes and spacing will scale accordingly. But if you use fixed px values, your layout won’t respond—potentially breaking usability.

In short, using rem helps ensure that your site works better for everyone, not just those with perfect vision.

2. Consistency Across Devices

should i use rem? A picture of what looks like a lot of red dots, potentially a digital interface. Very abstract.

When you design with rem, your site scales consistently across different screen sizes and resolutions. Since rem is based on a single root size, you get predictable results—without having to tweak every px value manually.

This also makes responsive design much easier, especially when paired with media queries and fluid layouts.

3. Easier Maintenance

If you ever want to change your entire site’s typography scale, it’s much easier when you’ve used rem. You can adjust the html font-size, and the whole design updates in proportion. This is nearly impossible with px, where every value would need to be updated individually.

When to Use rem (and When Not To)

To be clear: px isn’t evil—it’s just not ideal for everything.

✅ Use rem for:

  • Font sizes (headings, body text, buttons, etc.)

  • Line height

  • Margins and padding (for consistent spacing)

  • Layout elements that need to scale (like containers or grids)

❌ Use px for:

  • Border widths

  • Box shadows

  • Very precise elements (like 1px lines or hairlines)

  • Icon sizes (especially when they come from SVGs or sprite sheets)

In short, use rem when things need to scale, and use px when they don’t.

What About em?

You might’ve heard of em as well, and it’s easy to confuse the two.

  • em is relative to the font size of the parent element

  • rem is relative to the root font size of the document

In most cases, rem is more predictable because it stays consistent regardless of nesting. em can be useful in components like buttons, where you want spacing to scale with the text size inside the element—but for global styles, rem is usually the smarter choice.

How to Start Using rem

If you’re used to working in px, making the switch to rem might feel strange at first. Here’s a simple way to start:

  1. Assume 1rem = 16px (the browser default).

  2. Divide your usual pixel value by 16.

    • Example: 24px font size = 1.5rem

    • 32px padding = 2rem

You can also define a different base size in your CSS if you want a different scale, like:

css
html {
font-size: 62.5%; /* 1rem = 10px now */
}

This makes mental math easier, but remember: it overrides user settings—so weigh the pros and cons carefully.

Conclusion: Should I Use rem in My Websites?

If you’re still asking, “should I use rem in my websites?”—hopefully by now, you have your answer.

Yes. Use rem for fonts, spacing, and anything that needs to scale. It’s better for accessibility, flexibility, and future-proofing your design. Your users will thank you—and your future self will, too.

Start using rem today and join the wave of modern, accessible, and scalable web design.

Want more practical web design tips like this?
Explore my blog or get in touch if you need help making your site more accessible and user-friendly.