Free Developer Tool — 100% Client-Side

CSS px to rem Converter

Convert pixel values to rem units instantly. Includes a reference table for common values at any base font size.

Pixel Value (px)

Base Font Size (px)

Result

1rem

16px ÷ 16px = 1rem

Common Conversion Reference

Pixels	rem	Common Use

What Is a px to rem Converter?

A px to rem converter helps developers convert pixel values to relative rem units for responsive CSS. The rem unit (root em) is relative to the root element's font size, typically 16px in browsers. Using rem units instead of pixels ensures your entire layout scales proportionally when users adjust their browser's font size settings for accessibility.

Why Use rem Units?

Accessibility — Users who increase their default font size will see your entire UI scale, not just text.
Consistency — rem units are relative to a single root value, avoiding the compounding issues of em units.
Responsive Design — Change the root font size at different breakpoints and everything scales together.
Future-Proof — WCAG guidelines recommend relative units for better accessibility compliance.

Common CSS Values Reference

At the default 16px base, here are the most common CSS conversions:

4px = 0.25rem

Border radius, small gaps

8px = 0.5rem

Padding, spacing (xs)

12px = 0.75rem

Small text, padding (sm)

16px = 1rem

Base font size, padding (md)

24px = 1.5rem

Heading h3, padding (lg)

32px = 2rem

Heading h2, padding (xl)

rem vs em

rem is always relative to the root (<html>) font size. em is relative to the parent element's font size, which causes compounding — a 2em value inside a parent with 1.5em font size becomes 3em total. This makes rem more predictable and easier to reason about. Use rem for font sizes, spacing, and layout dimensions that should scale with the user's preferences.

How to Use

Enter a pixel value and optionally change the base font size (default 16px). The result displays instantly with the calculation shown below it. The reference table updates automatically to show common px values converted at your chosen base size. Use Copy Table to copy the reference table for use in documentation or style guides.

How to Do This in Code

function pxToRem(px, base = 16) {
  return px / base;
}

// Usage
console.log(pxToRem(16)); // 1rem
console.log(pxToRem(32, 16)); // 2rem
console.log(pxToRem(24, 14)); // 1.714rem

def px_to_rem(px, base=16):
    return px / base

# Usage
print(px_to_rem(16))  # 1.0
print(px_to_rem(32))  # 2.0
print(px_to_rem(24, 14))  # 1.714

# Quick px to rem in bash
px_to_rem() {
  echo "scale=3; $1 / ${2:-16}" | bc
}

px_to_rem 32   # 2.000
px_to_rem 24 14  # 1.714

Popular Developer Tools

JSON Formatter

Format, validate, and beautify JSON data

Base64 Encoder

Encode and decode Base64 instantly

JWT Decoder

Decode and inspect JWT tokens

Regex Tester

Test regular expressions in real-time

Hash Generator

Generate MD5, SHA-1, SHA-256 hashes

Deploy Your Next Project Fast

Get $200 free credit on DigitalOcean to deploy your apps with blazing-fast infrastructure.

Try DigitalOcean

Related Tools

Color Converter

Convert between HEX, RGB, HSL, and named CSS colors with live preview.

Case Converter

Convert text between camelCase, snake_case, kebab-case, and more.

Regex Tester

Test regular expressions in real-time with match highlighting, group capture, and flag controls.

CSS px to rem Converter FAQ

What is the rem unit?

rem (root em) is a CSS unit relative to the root element's font size. 1rem equals the font size of the <html> element, which is typically 16px by default in browsers. Using rem units ensures your layout scales when users change their browser's base font size.

What base font size should I use?

The default browser font size is 16px, which is what most websites use as their base. Some design systems use 14px or 10px for easier math (1rem = 10px). You can set any base size with this tool.

Why use rem instead of px?

rem units respect user accessibility settings. If a user increases their browser's default font size, your entire layout scales proportionally. px units are absolute and ignore these settings, making rem the recommended choice for font sizes and spacing in modern responsive design.

What is the difference between rem and em?

rem is relative to the root (<html>) font size. em is relative to the parent element's font size, which can compound and cause unpredictable results. rem is generally preferred for consistency across components.