CalculateY CalculateY

PX to REM Converter

The conversion between px and rem follows two formulas: rem = px / base font size, and px = rem x base font size, where the default browser base is 16px. A value of 24px equals 1.5rem at the standard 16px root. Enter a pixel or rem value below to convert instantly, with support for custom root font sizes.

Quick Answer

At the default 16px root font size, 24px equals 1.5rem. To convert: 24 / 16 = 1.5. In reverse, 2rem equals 32px because 2 x 16 = 32.

Base Font Size

PX to REM

REM to PX

Common Examples

Input Result
16px (base 16) 1rem
24px (base 16) 1.5rem
2rem (base 16) 32px
14px (base 10) 1.4rem
0.875rem (base 16) 14px

How It Works

The rem unit in CSS stands for “root em” and is relative to the root element’s font size (the <html> element). Most browsers default to a 16px root font size.

PX to REM: rem = px / base

REM to PX: px = rem x base

Where base is the root font size in pixels (typically 16).

Why use rem? Values in rem scale with the user’s browser font size setting. If a user increases their default font size from 16px to 20px for accessibility, all rem-based sizes adjust proportionally, while px values remain fixed. This makes rem the preferred unit for font sizes, spacing, and layout dimensions in modern CSS.

Common px-to-rem conversions at 16px base:

  • 10px = 0.625rem
  • 12px = 0.75rem
  • 14px = 0.875rem
  • 16px = 1rem
  • 18px = 1.125rem
  • 20px = 1.25rem
  • 24px = 1.5rem
  • 32px = 2rem
  • 48px = 3rem

Some CSS frameworks set the root font size to 10px (using html { font-size: 62.5%; }) to simplify mental math, since 1rem then equals 10px. This converter supports any base font size.

Worked Example

To convert 24px to rem with a 16px base: 24 / 16 = 1.5rem. To convert 2.5rem to px with a 16px base: 2.5 x 16 = 40px. With a custom base of 10px, 24px would be 24 / 10 = 2.4rem, and 1.5rem would be 1.5 x 10 = 15px.

Related Calculators

CSS Clamp Calculator

Generate CSS clamp() values for fluid typography and spacing between two viewport widths.

Flexbox Gap Calculator

Calculate item widths for flexbox layouts given container width, number of items, and gap size.

Aspect Ratio Calculator

Calculate and simplify aspect ratios from width and height, or scale dimensions to a target ratio.

Frequently Asked Questions

What is the default root font size in browsers?
The default root font size in all major browsers is 16px. This means 1rem = 16px unless the root font size has been changed via CSS on the html element or by the user's browser settings.
What is the difference between em and rem?
rem is always relative to the root (html) font size, making it predictable throughout the document. em is relative to the parent element's font size, which can compound in nested elements. For example, 1.5em inside a 1.5em parent would compute to 2.25 times the base size. Using rem avoids this compounding issue.
When should I use px instead of rem?
Use px for values that should not scale with font size, such as borders, box shadows, and very small decorative elements. Use rem for font sizes, padding, margins, and layout dimensions that should respect user accessibility preferences.
Why do some projects set the root font size to 62.5%?
Setting html { font-size: 62.5%; } makes the root font size 10px (62.5% of 16px), which simplifies mental conversion: 1.4rem = 14px, 1.6rem = 16px, and so on. The converter above supports this by allowing you to set the base font size to 10.