Engineering

PX to REM Conversion Guide — CSS Accessibility 2026

8 min read

Why and how to convert px to rem in CSS for WCAG accessibility compliance. Covers root font size, Tailwind config, and when rem is better than px for 2026.

Published: June 3, 2026•Last Updated: June 3, 2026•Abu Sufyan

Executive Summary

"Using 'px' for typography overrides user browser settings, breaking accessibility. Converting to 'rem' respects user preferences while maintaining your proportional design."

Up-to-date Feed

View All

SEO Tools

✓ Last tested: June 2026 · Verified against WCAG 2.2 Guidelines

1. Field Notes: The Accessibility Audit Nightmare

Last year, a major public sector client hired me to fix their WCAG compliance issues after failing an automated audit. Their entire frontend was built pixel-perfect to match a Figma file. Every font size, margin, and padding was hardcoded in px.

When an auditor tested the site using a browser with a custom default font size of 24px (used by many visually impaired users), the entire layout stayed rigidly locked at 16px. The text was unreadable for them. The fix wasn't just a simple find-and-replace; it was fundamentally shifting the team's mental model from "pixels on a screen" to "proportional relationships." Once we converted the core typography and spacing to rem, the UI scaled beautifully alongside user preferences, and the audit passed with flying colors.

2. Why rem Beats px for Accessible Web Design

In CSS, px (pixels) is an absolute unit. If you declare font-size: 16px;, the text will always render at 16px, regardless of the user's system or browser settings.

rem (root em) is a relative unit. It scales based on the root <html> element's font size. By default, browsers set this to 16px. 1rem = 16px.

If a user with low vision changes their browser's default font size to 24px, an element sized at 1rem will smoothly become 24px, and 2rem will become 48px. If you had used 16px, it would remain stubbornly at 16px. Using rem respects the user's agency.

3. The PX to REM Formula — How the Math Works

The conversion is straightforward assuming the standard browser default base of 16px:

Target PX / Base PX (16) = REM Value

Here are the most common values:

Target Pixel Value	Calculation	REM Equivalent
12px	12 / 16	0.75rem
14px	14 / 16	0.875rem
16px	16 / 16	1rem
18px	18 / 16	1.125rem
20px	20 / 16	1.25rem
24px	24 / 16	1.5rem
32px	32 / 16	2rem

4. How to Convert Your Entire CSS From px to rem

Setting the Root Font Size

Do not do this:

/* BAD: Overrides user preference */
html { font-size: 16px; } 

/* BAD: The 62.5% hack breaks some zooming functionality */
html { font-size: 62.5%; }

Do this:

/* GOOD: Let the browser dictate the base size */
html { font-size: 100%; }

Converting Typography

Convert all font-size and line-height declarations to rem.

.heading {
  font-size: 2rem; /* 32px equivalent */
  line-height: 1.2; /* Unitless line-height is preferred! */
}

Converting Spacing and Layout

Margins, paddings, and max-widths should also use rem so the layout breathes properly when text scales up.

.container {
  max-width: 75rem; /* 1200px equivalent */
  padding: 2rem; /* 32px equivalent */
}

5. When px Is Still the Right Choice

You shouldn't convert absolutely everything. Use px for properties that should remain fixed regardless of typography scale:

Borders: A 1px border should usually stay a crisp 1 pixel.
Box Shadows: Shadow blur radii often look distorted if they scale dramatically.
Media element constraints: Setting a hard limit on an avatar image or icon.

Frequently Asked Questions

Q: Why shouldn't I use px for font sizes? A: Pixels are absolute units. If a visually impaired user sets their default browser font size to 24px, your CSS font-size: 16px; will override their preference, making the text unreadable for them.

Q: What is the difference between em and rem? A: 'rem' is relative to the root element (html), ensuring consistent sizing anywhere in the document. 'em' is relative to the parent element, which can cause compounding font-size issues in nested layouts.

Q: Should I use rem for media queries? A: Yes. Using rem or em in media queries ensures your layout breaks at the correct proportions if the user changes their default font size, preventing layout breakage on zoom.

Q: Is 1rem always 16px? A: By default in most browsers, yes. However, if a user changes their browser settings, 1rem will equal their new preference (e.g., 20px or 24px).

Convert your layout values instantly. Use our free PX to REM Converter to calculate the exact units for your stylesheets →

External Sources

Abu Sufyan · Full-stack developer · Founder of WebToolkit Pro Github

Last updated: June 2026

Expert Recommendations

Pro Insights

01.Never set html { font-size: 62.5%; } just to make 1rem equal 10px. It breaks accessibility for users with browser zooming enabled in specific ways.
02.Use REMs for typography and macro-layout (like max-widths). Keep PX for borders, box-shadows, and micro-adjustments.
03.When using Tailwind CSS, stick to their default REM-based spacing scale to enforce accessible sizing out-of-the-box.

Frequently Asked Questions

Q. Why shouldn't I use px for font sizes?

Pixels are absolute units. If a visually impaired user sets their default browser font size to 24px, your CSS font-size: 16px; will override their preference, making the text unreadable for them.

Q. What is the difference between em and rem?

'rem' is relative to the root element (html), ensuring consistent sizing anywhere in the document. 'em' is relative to the parent element, which can cause compounding font-size issues in nested layouts.

Q. Should I use rem for media queries?

Yes. Using rem or em in media queries ensures your layout breaks at the correct proportions if the user changes their default font size, preventing layout breakage on zoom.