Free Developer Tool — 100% Client-Side

CSS px to rem Converter

Name: CSS px to rem Converter - WebUtil
Author: WebUtil

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.

Responsive web design and digital accessibility mandate a flexible typography system that respects user device settings. Pixels (`px`) are absolute units of measurement: 16px always renders as 16 physical pixels on standard displays, regardless of whether a visually impaired user has customized their operating system or browser font size preferences. Hardcoding px values in CSS violates WCAG 2.1 Guideline 1.4.4 (Resize Text). Root em (`rem`) units, by contrast, are relative to the root `<html>` element's font size (defaulting to 16px in all modern browsers). When you specify font sizes, padding, and layout dimensions in rem, your website scales proportionally and harmoniously when users adjust their browser font preferences or zoom levels. Converting px to rem follows the formula: `rem = px / baseFontSize`. For example, at a 16px base, 24px equals 1.5rem, 32px equals 2rem, and 12px equals 0.75rem. WebUtil's CSS px to rem Converter provides real-time bidirectional calculations, an interactive conversion reference table for common design system values, customizable root font sizes (including 10px 62.5% trick setups), and instant CSS code snippets.

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.

Related Guides & Tutorials

Converters 6 min read

CSS Units Guide: px, rem, em, vh, vw, and More Explained

A complete guide to CSS units. Learn the difference between px, rem, em, vh, vw, and other CSS units. Understand when to use each unit for responsive web design.

CSS px to rem Converter FAQ

What is the difference between px, rem, and em units in CSS?

px is an absolute unit that does not scale. rem is relative to the root <html> font size. em is relative to its immediate parent element's font size, which can compound unpredictably in nested components.

Why is using rem better for web accessibility than px?

When visually impaired users change their default browser font size from 16px to 24px, layouts built with rem scale up proportionally. Layouts hardcoded with px remain rigid and fail WCAG 1.4.4 criteria.

What is the default base font size in modern web browsers?

The standard root font size in all modern browsers (Chrome, Safari, Firefox, Edge) is 16 pixels.

How do I calculate rem from px mathematically?

Divide the target pixel value by the root font size: rem = px / baseFontSize. For example: 20px / 16px = 1.25rem.

What is the CSS 62.5% root font-size trick?

Setting html { font-size: 62.5%; } resets the base font size to 10px (62.5% of 16px). This makes mental math easy (1.4rem = 14px, 2.4rem = 24px) while preserving accessibility scaling.