Calnex LogoCalnex
design

PX to REM Converter

Convert between CSS pixel (px) and rem units with a customizable base font size. Includes a quick reference table from 1px to 32px. Essential for responsive web design.

Parameters

The numeric value to convert.

The root font size in pixels (default browser is 16px)

Choose px-to-rem or rem-to-px.

Results

Converted Value1rem

16px = 1rem (at 16px base)

Other results (2)
CSS Code
font-size: 1rem; /* 16px */

Ready-to-use CSS declaration

Quick Reference (1px–32px)
px | rem
---|---
1 | 0.0625
2 | 0.1250
3 | 0.1875
4 | 0.2500
5 | 0.3125
6 | 0.3750
7 | 0.4375
8 | 0.5000
9 | 0.5625
10 | 0.6250
11 | 0.6875
12 | 0.7500
13 | 0.8125
14 | 0.8750
15 | 0.9375
16 | 1.0000
17 | 1.0625
18 | 1.1250
19 | 1.1875
20 | 1.2500
21 | 1.3125
22 | 1.3750
23 | 1.4375
24 | 1.5000
25 | 1.5625
26 | 1.6250
27 | 1.6875
28 | 1.7500
29 | 1.8125
30 | 1.8750
31 | 1.9375
32 | 2.0000

Reference table: pixels to rem at 16px base

Why Choose PX to REM Converter

The Px to Rem Converter instantly converts between pixel and rem CSS units for responsive web design. Enter any value and base font size, and get the converted result along with a ready-to-use CSS code snippet and a quick reference table.

  • ✓Converts px to rem and rem to px with any base font size
  • ✓Generates copy-ready CSS code snippets
  • ✓Includes a quick reference table from 1px to 32px
  • ✓Supports fractional values for precise conversions

How to Use

  1. 1Enter the value you want to convert
  2. 2Set the base font size (default is 16px, the browser default)
  3. 3Choose the conversion direction: px to rem or rem to px
  4. 4View the converted value and CSS code snippet
  5. 5Use the reference table to quickly look up common conversions

Frequently Asked Questions (FAQ)

What is a rem unit in CSS?

A rem (root em) is a CSS unit relative to the root element (html) font size. Unlike em, which is relative to the parent element, rem always refers to the same base value, making it more predictable for sizing across nested elements.

Why should I use rem instead of px?

Using rem allows your design to scale proportionally when users change their browser font size for accessibility. Pixels are absolute units that do not respond to user preferences, while rem respects the root font size setting.

What is the default base font size in browsers?

All modern browsers default to 16px as the root font size. This means 1rem = 16px by default. However, users can change this in their browser settings, which is why using rem is better for accessibility.

How do I convert 24px to rem?

To convert 24px to rem with the default 16px base: 24 ÷ 16 = 1.5rem. Simply divide the pixel value by the base font size.

Can I change the base font size for my project?

Yes. Many projects set a custom root font size (e.g., 62.5% to make 1rem = 10px for easier math). Enter your project's base font size in the converter to get accurate results.

Authoritative References & Sources

CSS Values and Units - MDN Web Docs

View Source

rem - CSS: Cascading Style Sheets | MDN

View Source

The Battle Between px and rem

View Source