← Home

PX to REM Converter

Convert between px and rem in real time with a bidirectional converter. Adjust the root font size, view EM equivalents, and bulk-convert entire CSS files — all in your browser, no signup needed.

px
EM equivalent:1em(relative to parent, same value as rem when parent = root)

Quick Reference Table

PXREMUse Case
10px0.625remSmall captions
12px0.75remSmall text
14px0.875remBody text (small)
16px1remBody text (default)
18px1.125remLarge body text
20px1.25remH4 / lead
24px1.5remH3
28px1.75remH2 (small)
32px2remH2
36px2.25remH1 (small)
40px2.5remH1
48px3remDisplay
64px4remHero

Why Use REM?

  • •Accessibility: REM respects user browser font-size settings. If someone sets their default to 20px, rem-based layouts scale proportionally.
  • •Consistency: All rem values reference a single root, making global scaling easy (change :root font-size and everything adjusts).
  • •Responsive design: Combine rem with media queries to scale your entire UI by adjusting one value.
  • •Maintainability: Easier to reason about proportions when all sizes derive from one base.

Last updated: March 2026

What Is a PX to REM Converter?

A PX to REM converter translates pixel values into rem units and vice versa based on your root font size. The formula is straightforward: rem = px / root-font-size. With a default root of 16px, 24px becomes 1.5rem. This tool goes beyond simple arithmetic — it offers bidirectional conversion, a bulk CSS converter for entire stylesheets, and a dynamic reference table that updates when you change the root size.

16px is the default root font size in all modern browsers. This has been the standard since the early days of the web, and all major browsers — Chrome, Firefox, Safari, and Edge — use it as their default.

Why Use REM Instead of PX?

The primary reason to use rem over px is accessibility. When users change their browser's default font size — whether for vision impairment, personal preference, or display scaling — rem-based layouts respect those changes while px-based layouts do not. Using rem improves accessibility for the 26% of adults who adjust their browser font settings.

Beyond accessibility, rem simplifies responsive design. Instead of changing dozens of individual values across breakpoints, you can adjust the root font size and every rem value scales proportionally. This makes maintenance significantly easier and reduces the chance of inconsistent spacing throughout your design.

PX vs REM vs EM Explained

  • PX (Pixels)An absolute unit. 1px is always 1px on screen regardless of context. Predictable but does not scale with user preferences. Best for borders, box shadows, and fixed-size elements.
  • REM (Root EM)Relative to the <html> element's font size. 1rem = root font size (typically 16px). Consistent throughout the document because it always references the same root. Ideal for font sizes, padding, margins, and spacing.
  • EMRelative to the parent element's font size. 1em inside a 20px parent = 20px. Can compound in nested elements (an em inside an em can produce unexpected sizes). Useful for component-level sizing where you want elements to scale with their container's text.

Key Features

  • •Bidirectional conversion: Type in either the PX or REM field and the other updates instantly. No need for a separate 'REM to PX' tool.
  • •Custom root font size: Change the root from the default 16px to match your project's settings. The reference table and all conversions update in real time.
  • •Bulk CSS converter: Paste an entire stylesheet and convert all px values to rem at once. Configure decimal places, skip small values, and toggle line-height conversion.
  • •Quick reference table: A pre-built table of common sizes (10px to 64px) with their rem equivalents and typical use cases. Updates dynamically when you change the root size.
  • •EM equivalent: See the em value alongside rem, useful when working with component-level sizing.

Related Tools

JSON Formatter

Format and validate JSON

Regex Tester

Test regular expressions

CSS Gradient Generator

Create CSS gradients visually

Color Picker

Pick and convert colors

Frequently Asked Questions

What is rem in CSS?+
REM stands for 'root em'. It is a CSS unit relative to the root element's font size (the <html> element). If the root font size is 16px (the browser default), then 1rem = 16px, 0.5rem = 8px, and 2rem = 32px. Unlike em, which is relative to the parent element's font size, rem always references the root, making it predictable and easy to reason about.
Why should I use rem instead of px?+
Using rem instead of px makes your site accessible to users who change their browser's default font size. About 26% of adults adjust their browser font settings. When you use px, text stays the same size regardless of user preference. With rem, your layout scales proportionally when users increase or decrease their base font size, respecting their accessibility needs.
What is the default root font size in browsers?+
The default root font size in all modern browsers (Chrome, Firefox, Safari, Edge) is 16px. This means 1rem = 16px unless you explicitly change the font-size on the <html> element. You can verify this by inspecting the computed styles of the <html> element in your browser's developer tools.
What is the difference between rem and em?+
REM is always relative to the root (<html>) font size, so 1rem is the same value everywhere in your document. EM is relative to the font size of the element's parent, which means it compounds — an em inside a nested element with em sizing can produce unexpected results. REM is generally preferred for layout and spacing because it's more predictable.
Should I convert everything to rem?+
Not necessarily. Use rem for font sizes, spacing, padding, and margins so they scale with user preferences. Keep px for things that should remain fixed regardless of zoom, like borders (1px), box shadows, and certain decorative elements. Media query breakpoints can use either — rem-based breakpoints also respect user font settings.
Does Tailwind CSS use rem?+
Yes. Tailwind CSS uses rem for most of its spacing and typography utilities. For example, p-4 is 1rem (16px), text-base is 1rem, and text-lg is 1.125rem (18px). This means Tailwind-based designs automatically respect user font size preferences, which is one of the framework's accessibility advantages.