PX vs REM vs EM: Which CSS Unit Should You Use?

Use rem for font sizes and most spacing, em for things that should scale with their own text, and px for fine details like borders. A px value is fixed, while rem is relative to the root font size, which commonly defaults to 16px and changes when visitors raise their browser's default text size. That makes rem the more accessible choice for text.

The difference sounds academic until a visitor with low vision sets their browser to larger text and your site ignores it. This guide explains how each unit is calculated, what that means for accessibility, and a practical rule set you can apply to any stylesheet.

How each unit is calculated

MDN's reference for CSS length units defines them as follows.

px (pixels)

One CSS pixel is defined as 1/96 of an inch (1in = 96px). On a standard screen it traditionally matches one device pixel; on high-resolution screens one CSS pixel covers several device pixels. Either way, 16px is always 16px, regardless of the user's font settings.

rem (root em)

rem "represents the font-size of the root element (typically <html>)". MDN adds that "a common browser default is 16px, but user-defined preferences may modify this." So 1.5rem is 24px for someone on default settings and larger for someone who has increased their default font size.

em

em "represents the calculated font-size of the element". Used on the font-size property itself, it refers to the inherited font size from the parent. That makes em local: a padding: 0.5em on a button grows when that button's text grows.

Quick comparison

Why rem matters for accessibility

Many people change their browser's default font size because standard text is hard for them to read. MDN's note on length units is direct: "Absolute lengths can cause accessibility problems because they are fixed and do not scale according to user settings. For this reason, prefer relative lengths (such as em or rem) when setting font-size."

MDN's font-size reference goes further, saying that defining font sizes in px "is not accessible, because the user cannot change the font size in some browsers."

Zoom vs text size settings

There are two different ways people enlarge text:

• Page zoom (Ctrl or Cmd and +) scales everything, including px values. A px-based site still gets bigger when zoomed.
• Default font size settings in the browser change the root font size. Only text sized in relative units responds.

The W3C's guidance on WCAG Success Criterion 1.4.4 Resize Text requires that "text can be resized without assistive technology up to 200 percent without loss of content or functionality", at Level AA. It treats scaling as "primarily a user agent responsibility" and says content passes if it reaches 200% with at least one mechanism browsers support, so a px-based site that zooms correctly can technically pass.

But passing the minimum is not the same as respecting a user's choice. Someone who has set a larger default font size expects every site to honor it without having to zoom each one. Sizing text in rem does that for free. The WCAG techniques for this criterion include specifying font sizes in em and percentages and text container sizes in em units, which reflects the same principle of relative sizing.

For the wider picture of what accessible design involves, see our guide to making a website accessible with WCAG 2.2.

The em compounding problem

em has one well-known trap: it compounds. MDN's font-size page shows that when nested elements each use em, each one multiplies its parent's size. With a 16px default, a 1.6em element inside another 1.6em element renders at 40.96px rather than 25.6px.

MDN explains that rem was "invented in order to sidestep the compounding problem", because it is always relative to the root element, never the parent. That is why most modern stylesheets use rem as the default for font sizes and keep em for deliberate, local scaling.

Which unit to use where

A practical rule set:

None of this is absolute. The goal is that text, and the space around it, grows when a visitor asks for bigger text.

How to convert px to rem

The formula is simple:

rem = pixels ÷ root font size

With the common 16px root:

Designs often arrive from design tools in pixels, so conversion is a daily task. Our free PX to REM converter converts single values or a whole block of pasted CSS, with any root font size.

Should you set the root font size?

Avoid setting html font-size in px

Writing html { font-size: 16px; } looks harmless, but it fixes the root and overrides the user's preference, so every rem on the page stops responding to their setting. If you need to change the root size, use a percentage, which stays relative to the browser default.

The 62.5% trick

Some developers set html { font-size: 62.5%; } so that, on default settings, 1rem equals 10px and conversions become easy (1.6rem is 16px). Because it is a percentage, it still respects user settings. The downsides are that you must then set a body font size explicitly, and third-party components that assume a 16px root will render smaller than intended. For most sites, keeping the browser default and using a converter is simpler.

Common mistakes

1. Setting the root font size in px, which cancels out the benefit of rem.
2. Using px for all font sizes because the design file uses px.
3. Nesting em font sizes and getting compounding surprises.
4. Fixed-height containers in px around text, which clip content when text grows. This is the WCAG failure F69, content clipped or obscured at 200%.
5. Only testing with zoom. Also change your browser's default font size and reload.
6. Forgetting media queries. Breakpoints written in px do not shift when a user enlarges text; test what happens to your layout at larger default sizes before deciding which unit to use.

Larger text also affects other parts of your design, such as color contrast at different sizes, which our colour contrast guide covers, and font loading, covered in why web fonts slow your site down.

A quick test you can do now

1. Open your site in Chrome, Firefox, Edge or Safari.
2. In the browser settings, increase the default font size to its largest or near-largest setting.
3. Reload your home page and a key landing page.
4. Check: did body text get bigger? Did headings? Does anything overlap, get cut off or force horizontal scrolling?

If text stays the same size, your stylesheet is probably using px for font sizes or a px root. If things overlap, look for fixed heights and widths. Accessibility work like this is often a small set of CSS changes, and Make It Flow's free tools can help you find the values to change.

Frequently asked questions

Is rem better than px?

For font sizes and most spacing, yes, because rem responds to the visitor's default font size while px does not. Px remains the right choice for fine details such as 1px borders and shadows, where scaling adds nothing. Most well-built sites use both, each where it fits.

How many pixels is 1rem?

1rem equals the root element's font size. Browsers commonly default to 16px, so on default settings 1rem is 16px, 1.5rem is 24px and 0.875rem is 14px. If a visitor raises their default font size, or your CSS sets a different root size, 1rem changes accordingly.

When should I use em instead of rem?

Use em when something should scale with its own text rather than the page. Button padding, icons beside labels and spacing inside a component are good examples: make the button text bigger and the padding follows. Avoid em for font sizes in deeply nested elements, because the values compound.

Does browser zoom work with px?

Yes. Page zoom scales px values along with everything else, which is why px-based sites can still meet WCAG's 200% resize requirement. The problem is the separate default font size setting, which only affects text sized in relative units like rem and em.

Do I need to convert my whole site from px to rem?

Not all at once. Start with font sizes, especially body text, and remove any px value on the html element. Then convert spacing around text and fixed heights that clip content. Borders and shadows can stay in px. Test with a larger default font size after each step.

Related reading

• How to Make a Website Accessible: WCAG 2.2 Basics Explained: Make a website accessible by meeting WCAG 2.2 AA: good contrast, alt text, labelled forms, keyboard access and visible focus. A plain-English guide with code.
• Website Accessibility Checklist for UK Businesses (2026): A website accessibility checklist for UK businesses: what the Equality Act, public sector rules and the EAA expect, plus 25 checks against WCAG 2.2 AA.
• Why Are My Web Fonts Slowing My Site Down? How to Fix It: Web fonts slowing your site? Cut font files, use WOFF2, set font-display, preload the main font and consider self-hosting and subsetting for faster text.

Sources

• MDN Web Docs: CSS length units
• MDN Web Docs: font-size
• W3C WAI: Understanding Success Criterion 1.4.4 Resize Text (WCAG 2.2)