Why Using rem Units Improves Web Design: A Guide to Better Accessibility

by Mylene — 6 minutes

Why using rem instead of pixels makes your UI more stable and accessible

In modern web projects, small technical choices often have a bigger impact than expected. One of those choices is how you define sizes in your layout. Many developers still default to pixels because they feel predictable. In practice, using relative units such as rem often leads to a more stable, more accessible and easier to maintain interface.

This is not only a theoretical preference. In real projects, the difference between px and rem becomes visible as soon as users change browser settings, switch devices or use accessibility features. Choosing the right unit can make the difference between a layout that breaks and a layout that adapts.

What rem actually is

rem stands for root em. It is a relative unit based on the font size of the root <html> element. Every value defined in rem is calculated from that single root value instead of being fixed.

Because everything depends on the root font size, the entire interface scales consistently. When the root size changes, all dependent values change with it. This makes the layout predictable without making it rigid.

In many projects, the safest approach is to keep the browser default font size intact and use rem throughout the interface.

html {
  font-size: 100%;
}

body {
  font-size: 1rem;
}

h1 {
  font-size: 1.5rem;
}

Keeping the default browser font size is usually better for accessibility, because user preferences and browser settings continue to work as expected. From there, teams often choose one of two practical approaches: writing rem values directly, or using a helper function to keep values readable while still scaling correctly.

When working from design tools like Figma, developers often want to keep pixel based values in code while still using rem in the final output. A helper function can make that easier.

@function rem($pixels) {
  @return calc($pixels / 16) * 1rem;
}

.card {
  padding: rem(24);
  border-radius: rem(8);
  font-size: rem(16);
}

Another common approach is to store spacing and typography values in variables or design tokens and reuse those across the application.

$space-sm: 0.5rem;
$space-md: 1rem;
$space-lg: 1.5rem;

$font-size-body: 1rem;
$font-size-title: 1.5rem;

.card {
  padding: $space-md;
  font-size: $font-size-body;
}

Some teams prefer to change the root font size to 62.5% so that 1rem equals roughly 10 pixels. This can make calculations easier, but it is a workflow choice rather than a requirement. The important part is that the layout scales with the user's settings instead of assuming one fixed size.

Why pixels can cause problems

Using pixels is not wrong, but pixels are fixed. That means the layout does not automatically adapt when the user changes browser settings.

button {
  padding: 16px;
  font-size: 14px;
}

If the user increases the browser font size, the text may grow, but the padding stays the same. This can lead to clipped text or broken layouts.

With rem, the same component scales together with the rest of the interface.

button {
  padding: 1.6rem;
  font-size: 1.4rem;
}

Because both values depend on the root font size, the layout stays proportional.

Accessibility starts with relative units

Accessibility guidelines require that users must be able to resize text without losing content or functionality. When layouts are built entirely with pixels, this requirement becomes harder to meet.

WCAG resize text guideline

In one of our projects we noticed that increasing the browser font size caused parts of the UI to overflow. Containers were defined in pixels while text scaled with user settings. Switching to rem solved the problem without rewriting every component.

Because rem is based on the root font size, the browser can scale the interface in a consistent way.

Consistency across the entire design

When all sizes are based on the same root value, spacing, typography and component sizes stay proportional. This makes the design easier to reason about and easier to maintain.

Nielsen Norman Group – Consistency in UX

When margins, padding and font sizes all scale together, the interface feels more stable and predictable.

Responsive behaviour without rewriting everything

html {
  font-size: 100%;
}

@media (max-width: 768px) {
  html {
    font-size: 90%;
  }
}

Because the rest of the layout uses rem, the entire interface scales automatically.

Easier maintenance in real projects

A layout built with pixels often requires many small changes when the design evolves. When the same layout is built with rem, global changes can often be done in one place.

Increasing the root font size slightly can make the entire interface larger without touching individual components.

When pixels still make sense

Pixels can still be useful for values that should not scale, such as borders.

.card {
  border: 1px solid #ccc;
}

The goal is not to remove pixels completely, but to use relative units where scaling is needed.

rem vs em

Both rem and em are relative units, but they behave differently.

em depends on the font size of the parent element, while rem always depends on the root element.

.parent {
  font-size: 20px;
}

.child {
  font-size: 1em;
}

Here the child depends on the parent.

.child {
  font-size: 1rem;
}

Here the child depends on the root.

For layout, spacing and typography, rem is usually easier to control because it keeps the entire interface connected to one base value.

Common mistakes when using rem

Mixing fixed and relative values can cause layout issues.

.container {
  width: 300px;
}

.text {
  font-size: 1.2rem;
}

Better:

.container {
  width: 30rem;
}

Changing the root font size without understanding the effect can also break layouts.

html {
  font-size: 100%;
}

Helper functions or tokens help keep values consistent.

@function rem($px) {
  @return calc($px / 16) * 1rem;
}

Example

CodePen demo – rem in action

meerdivotion

Cases

Blogs

Event