px vs rem vs em

px, rem and em are three of the most commonly used CSS units, especially when working with typography, spacing and component dimensions. They can sometimes produce similar visual results, but they represent very different relationships.

px represents a CSS pixel, rem is relative to the root element's font size, and em is relative to the relevant element's font size. Understanding that distinction is more important than memorizing a rule such as 'always use rem' or 'never use px'.

The right unit depends on what should control the value. If a dimension should remain a small fixed visual detail, px may be appropriate. If it should follow the root typography scale, rem is often a good choice. If it should scale with a component's own text size, em can be useful.

px vs rem vs em at a Glance

The key distinction is the reference value. px does not scale from a parent font size, rem always looks at the root element, while em can depend on the element where it is used and its inherited font-size context.

What Is px?

The px unit represents a CSS pixel. It is the most familiar CSS unit and is often used when a developer wants a predictable CSS dimension.

.button {
  min-height: 44px;
  border: 1px solid #ccc;
  border-radius: 8px;
}

.icon {
  width: 24px;
  height: 24px;
}

A CSS pixel is an abstract CSS measurement rather than necessarily one physical pixel on a display. Devices with different pixel densities can map CSS pixels to different numbers of physical pixels.

When px Makes Sense

There is nothing inherently wrong with px. In fact, some interface details are easier to control with a fixed CSS size.

• Borders such as 1px or 2px.
• Small icons with intentionally fixed dimensions.
• Precise outlines and focus indicators.
• Small decorative details.
• Dimensions that intentionally should not follow the typography scale.

For example, a one-pixel border usually does not need to become proportionally larger just because the root font size changes.

What Is rem?

rem stands for root em. It is relative to the font size of the root element, normally the html element.

html {
  font-size: 16px;
}

.title {
  font-size: 2rem;
}

.card {
  padding: 1.5rem;
}

With a 16px root font size, 1rem corresponds to 16px, 2rem corresponds to 32px and 1.5rem corresponds to 24px.

The actual result depends on the computed font size of the root element. This is one reason rem is useful for scalable design systems: many values can share one global sizing reference.

What Is em?

The em unit is also a font-relative unit, but unlike rem it is not tied exclusively to the root element. Its meaning depends on the font-size context of the element where the value is applied.

.card {
  font-size: 20px;
}

.card-title {
  font-size: 1.5em;
}

Here, the card title's 1.5em is based on its relevant 20px font-size context, producing a computed font size of 30px.

The Most Important Difference Between rem and em

The simplest way to remember the distinction is that rem follows the root, while em follows the relevant local font-size context.

html {
  font-size: 16px;
}

.parent {
  font-size: 20px;
}

.child-rem {
  font-size: 1.5rem;
}

.child-em {
  font-size: 1.5em;
}

The rem value is based on the 16px root size, so 1.5rem is 24px. The em value is based on the 20px local font-size context, so 1.5em is 30px.

Why em Can Be Tricky

The main challenge with em is that relative font sizes can compound through nested elements. This can be useful when intentional scaling is required, but it can also make the resulting size less obvious.

.parent {
  font-size: 1.25em;
}

.child {
  font-size: 1.2em;
}

.grandchild {
  font-size: 1.1em;
}

Each level can influence the next. When several nested elements use em, you need to follow the computed font size through the hierarchy to know the final result.

em Does Not Always Mean the Same Thing as Parent font-size

A common oversimplification is saying that em is always relative to the parent element's font size. That description is useful for understanding many font-size examples, but it is not universally correct for every CSS property.

For font-size, em values are resolved relative to the element's parent font size. For other properties such as padding, margin or width, em is based on the element's own computed font size.

.button {
  font-size: 1rem;
  padding: 0.75em 1.25em;
}

This behavior can actually be useful. The button's padding scales automatically when the button's font size changes, which is one reason em can work well for component-internal spacing.

rem for Typography

rem is commonly used for typography because all font sizes can share the root sizing system.

body {
  font-size: 1rem;
}

h1 {
  font-size: 2.5rem;
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.5rem;
}

small {
  font-size: 0.875rem;
}

This produces a predictable hierarchy. If the root font size changes, the entire type scale responds proportionally.

rem for Spacing

rem is also commonly used for spacing because typography and spacing can share the same design scale.

.card {
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.section {
  padding-block: 4rem;
}

This approach makes spacing values easier to reason about across a design system. A value such as 1rem can represent a base spacing unit while larger values represent larger steps.

em for Component-Relative Sizing

em is particularly useful when the internal dimensions of a component should scale with its typography.

.button {
  font-size: 1rem;
  padding: 0.625em 1em;
  border-radius: 0.5em;
}

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

If the button's font size increases, its padding, radius and icon can scale with it. This creates a self-contained component whose proportions follow its text size.

A Practical rem + em Combination

You do not have to choose one unit for the entire project. A common strategy is to use rem for global design tokens and em for relationships inside components.

:root {
  --font-size-base: 1rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
}

.button {
  font-size: var(--font-size-base);
  padding: 0.625em 1em;
  border-radius: 0.5em;
}

.page {
  padding: var(--space-6);
}

The global scale remains based on rem, while the button's internal proportions remain tied to its own font size.

px vs rem for Accessibility

One reason developers often prefer rem for typography is that it maintains a relationship with the root font size. This can make the interface more adaptable when users change their preferred text size or browser settings.

This does not mean that every px-based font size automatically prevents accessibility. The accessibility outcome depends on the complete implementation, browser behavior, zoom or text scaling, layout constraints and whether content remains usable when text becomes larger.

The Common 62.5% Technique

Some CSS projects set the root font size to 62.5% so that 1rem becomes approximately 10px when the browser's default root size is 16px.

html {
  font-size: 62.5%;
}

body {
  font-size: 1.6rem;
}

This makes rem calculations visually convenient because 1.6rem corresponds to approximately 16px under the common default. However, this technique is not required. It can also make the relationship with the browser's default font sizing less straightforward.

Modern projects can simply keep the root sizing behavior natural and use values such as 1rem, 1.25rem and 1.5rem directly. The important thing is having a consistent scale.

Do You Need to Set html font-size to 16px?

No. Browsers have a default root font size, commonly 16 CSS pixels, but a stylesheet does not need to explicitly set html { font-size: 16px; } just to make rem work.

html {
  font-size: 16px;
}

Explicitly setting the root size can be appropriate when a project has a deliberate type scale, but overriding it without a reason is not necessary.

How Browser Zoom Affects px, rem and em

Browser zoom changes how CSS content is rendered and should not be thought of as a simple conversion between px and physical pixels. Modern browsers scale the page as part of the rendering process.

The important practical lesson is that developers should test layouts under zoom rather than assuming that a particular unit automatically makes the page accessible.

Typography Scales with rem

A typography scale defines relationships between different text sizes. rem is a natural fit because the scale can be expressed relative to one root value.

:root {
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --text-3xl: 3rem;
}

The exact values depend on the project's visual language. A typography scale generator or modular scale calculator can help establish consistent relationships instead of choosing every value independently.

Using em for Responsive Components

One of the strongest practical uses for em is creating components that scale according to their own font size.

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.35em 0.75em;
  font-size: 0.875rem;
  border-radius: 0.5em;
}

.badge-large {
  font-size: 1.125rem;
}

The larger badge automatically receives proportionally larger internal spacing because those values use em. This can reduce the number of separate size declarations required for variants.

Using px for Borders and Focus Indicators

Small visual details often work well with px because their purpose is to provide a specific visual thickness rather than participate in the typography scale.

button {
  border: 1px solid #c7cdd4;
}

button:focus-visible {
  outline: 3px solid #155eef;
  outline-offset: 2px;
}

A 1px border does not normally need to become 1.25px or 1.5px because the root font size changes. A focus indicator may similarly be intentionally specified in px for consistent visual prominence.

What About Other CSS Units?

px, rem and em are important, but they are not the only CSS units. Percentages are useful for parent-relative dimensions, viewport units such as vw and vh respond to the viewport, ch is useful for text measure and fr distributes flexible Grid space.

The choice should always follow the relationship you want. If an element should respond to the viewport, rem is not automatically the right replacement for px. If a component should respond to its own typography, em may be more useful than rem.

px vs rem vs em in a Design System

A design system benefits from deciding where each unit has a role. Without such a strategy, one component may use px, another em and another arbitrary rem values for the same type of spacing.

These are conventions rather than hard requirements. A component library can use a different strategy if its requirements justify it.

Common Mistakes

Using px for Every Value

A stylesheet full of independent pixel values can become difficult to scale consistently. Typography and spacing often benefit from a shared relative scale.

Using rem for Absolutely Everything

The opposite approach can be just as unhelpful. A 1px border does not need to become a rem value merely because rem is popular for typography.

Using em Without Understanding Inheritance

Nested em values can compound. If you cannot easily predict the resulting size, inspect the computed styles or consider whether rem would provide a clearer relationship.

Assuming rem and em Are Interchangeable

They are both relative units, but their reference points are different. Replacing one with the other can change the final dimensions of a component.

Ignoring the Root Font Size

rem values depend on the computed font size of the root element. If a project changes that value, every rem-based dimension changes with it.

How to Choose Between px, rem and em

A useful way to choose the unit is to ask what should happen when the surrounding typography changes.

• If the value should be a small, predictable visual dimension, consider px.
• If the value should follow the application's root sizing scale, consider rem.
• If the value should scale with the component's own text size, consider em.
• If the value should respond to a parent dimension, consider %.
• If the value should respond to the viewport, consider vw, vh or related viewport units.
• If the value should respond to a component's container, consider container query units.

A Practical Example

Consider a button with text, an icon, padding, a border and rounded corners. Different parts of the component can reasonably use different units.

.button {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;

  padding: 0.625em 1em;
  font-size: 1rem;

  border: 1px solid #c7cdd4;
  border-radius: 0.5em;
}

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

.button:focus-visible {
  outline: 3px solid #155eef;
  outline-offset: 2px;
}

Here, the button's font size is based on rem, its internal spacing and radius use em so they scale with the button's text, and the border and focus indicator use px for predictable visual thickness.

A Simple Rule of Thumb

This rule is intentionally simple. It is better to think about the relationship behind a value than to apply a universal conversion rule to every CSS declaration.

Frequently Asked Questions

Helpful CSS Unit Tools

A px-to-rem converter is useful when migrating pixel-based typography or spacing to a rem-based scale. A rem-to-em converter helps when creating component-relative values, while a general CSS unit converter is useful for checking conversions between different CSS measurement systems.

Typography scale generators and modular scale calculators can help create consistent relationships between font sizes instead of choosing every heading size independently. They are especially useful when building a design system around a rem-based type scale.

Conclusion

px, rem and em are not competing units where one should replace the other everywhere. Each expresses a different relationship. px is useful for predictable visual details, rem provides a root-relative scale, and em allows component values to respond to local typography.

For many projects, a practical strategy is to use rem for global typography and spacing, em for component-internal relationships and px for borders, focus indicators and small fixed details. This keeps the global design system predictable while allowing individual components to scale naturally.

The most useful question is not 'Should I use px, rem or em?' but 'What should this value be relative to?' Once that relationship is clear, the appropriate CSS unit is usually much easier to choose.