nicetool.dev logo

PX to REM Converter

Type in either field. Click a row in the table to load it, or paste CSS below to convert it all.

24px = 1.5rem = 18pt = 150%

Conversion table (base 16px)

pxrempt
1px0.0625rem0.75pt
2px0.125rem1.5pt
4px0.25rem3pt
6px0.375rem4.5pt
8px0.5rem6pt
10px0.625rem7.5pt
12px0.75rem9pt
14px0.875rem10.5pt
16px1rem12pt
18px1.125rem13.5pt
20px1.25rem15pt
24px1.5rem18pt
28px1.75rem21pt
32px2rem24pt
36px2.25rem27pt
40px2.5rem30pt
48px3rem36pt
56px3.5rem42pt
64px4rem48pt
72px4.5rem54pt
80px5rem60pt
96px6rem72pt
128px8rem96pt

Convert a CSS snippet

6 values converted
.card {
  padding: 1.5rem 2rem;
  margin-bottom: 1rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
}

What is the difference between px and rem?

A px is a fixed CSS unit, while 1rem equals the font size of the root html element, which is 16px in every browser by default. Sizing text, spacing and layout in rem means everything scales together when a user raises the default font size in their browser settings, an important accessibility requirement (WCAG 1.4.4, Resize Text). The conversion is simple: rem = px / root font size, so 24px is 1.5rem with a 16px base. em works the same way but is relative to the font size of the parent element, which compounds when elements are nested.

Features

  • • Two-way px and rem conversion with a custom root font size
  • • Also shows pt and percentage equivalents
  • • Table of common sizes from 1px to 128px, clickable
  • • Bulk converter that rewrites every px value in a CSS snippet
  • • Option to keep 1px hairline borders in px

Runs locally

All conversions happen in your browser, including the CSS you paste. Nothing is uploaded.

Instant math, 100% client-side.

How to use the PX to REM

  1. 1

    Check the root font size: leave 16px unless your project sets html { font-size } to something else, such as 10px or 62.5%.

  2. 2

    Type a value in the px field to get rem, or in the rem field to get px. The line below also shows pt and percent.

  3. 3

    Click any row of the table to load common sizes from 1px to 128px.

  4. 4

    Paste a block of CSS in the bulk converter: every px value becomes rem, 0px becomes 0, and 1px borders can stay in px. Copy the result into your stylesheet.

Practical examples

Typography scale

A 14 / 16 / 20 / 24 / 32px type scale becomes 0.875 / 1 / 1.25 / 1.5 / 2rem, so headings grow when users enlarge text in their browser.

Migrating an old stylesheet

Paste legacy CSS written in px and convert padding, margins and font sizes in one go, then review media queries and keep hairline borders in px.

Matching a Figma design

Designers hand over sizes in px. Convert spacing tokens such as 4, 8, 12, 16 and 24px to 0.25, 0.5, 0.75, 1 and 1.5rem for a design system.

The 62.5% trick

Some projects set html { font-size: 62.5% } so 1rem = 10px. Set the root size to 10 and 24px becomes an easy 2.4rem.

Frequently asked questions

Should I use rem or px?+

Use rem for font sizes and most spacing so layouts respect the user's font size preference. px is still fine for borders, shadows and fine details that should not scale.

What is the difference between rem and em?+

rem is relative to the root html font size and stays predictable. em is relative to the parent element, so nested em values multiply, which is useful for components but easy to get wrong.

Is 16px always the base?+

It is the default in every browser, but users can change it and your CSS can override it on html. Always convert with the root size your project actually uses.

Should media queries use rem?+

Media queries in em or rem are relative to the browser default font size, not to your html rule, and they adapt when users zoom text. Many teams use em in media queries for this reason.