PX to REM Converter | CSS Calculator & Cheat Sheet

Convert PX to REM or REM back to PX for CSS and UI design. Change the base font size, use a live cheat sheet, and check nearby Tailwind spacing tokens.

PX / REM Converter

rem = px / root font-size

px
Common bases
px
rem

Cheat Sheet

PXREMNearest Tailwind
4px0.25remp-1
8px0.5remp-2
10px0.625rem-
12px0.75remp-3
14px0.875rem-
16px1remp-4
18px1.125rem-
20px1.25remp-5
24px1.5remp-6
32px2remp-8
40px2.5remp-10
48px3remp-12
64px4remp-16
80px5remp-20
96px6remp-24

How to Use

  1. Confirm your project's html font-size in the Base Size field. The common default is 16px.
  2. Type a design value such as 24 in the PX input.
  3. The REM input updates instantly to 1.5rem; you can also type 2rem to get 32px.
  4. Use the cheat sheet below for common font sizes, spacing values, and Tailwind spacing references.

Core Features

  • Instant Two-Way Conversion: Type PX or REM and get the opposite value immediately, with no calculate button.
  • Custom Base Font Size: Start with 16px or switch to 10px, 14px, or any project-specific root size.
  • Built-In Cheat Sheet: Common sizes update with your base size, including 12px, 16px, 24px, and 32px equivalents.
  • Tailwind Spacing Reference: See common Tailwind spacing tokens for matching pixel values.
  • Local and Fast: All calculations run in browser memory without network requests.

Related Tools

CSS Minifier & Beautifier - Stats, Safe Compression, Local

Minify or beautify CSS locallyโ€”no uploads. Remove comments/whitespace, view size savings stats, or unminify code for readability. Copy the result now.
Secure JSON Formatter & Type Generator - Local Type Gen

Secure JSON formatter: format, validate, and fix JSON locally. Beautify/minify, highlight errors, generate TypeScript or Zod, convert to XMLโ€”private. Try now.
Free JSONPath Tester & Evaluator | Local Real-Time Queries

Free JSONPath tester and evaluator for API JSON. Extract matching nodes in real time, inspect paths, and copy JSON results while parsing stays local in your browser.
JSON to CSV Converter - Local Spreadsheet Export

Convert JSON objects or arrays to CSV locally in your browser. Flatten fields, preview the result, then copy or download CSV without uploading data.
CSV to JSON Converter - Local Real-Time Parser

Convert CSV text or files to JSON arrays locally in your browser. Supports headers, comma/semicolon/tab delimiters, drag-and-drop files, copy, and download with no uploads.
JSON Diff Checker - Local Semantic Compare

Compare two JSON documents locally in your browser. Sort object keys for a semantic diff, ignore key-order noise, and mark added, removed, and modified fields without uploads.
JSON Minifier & Compressor

Minify JSON into one line, remove indentation and line breaks, and compare original size, minified size, saved bytes, and saved percentage.
JSON to TypeScript Converter - Generate Interfaces Locally

Free online JSON to TypeScript converter. Instantly generate TypeScript interfaces and types from your JSON payloads. 100% private, client-side code generation.

Calculation Logic

  • PX to REM formula: REM = PX / Base Size.
  • REM to PX formula: PX = REM ร— Base Size.
  • With the browser default root size, 16px = 1rem and 24px = 1.5rem.

FAQ

How many pixels is 1rem?

In most browsers, 1rem equals 16px by default. If your project changes html { font-size }, use that root size instead.

What is the difference between PX and REM?

PX is an absolute pixel unit. REM is relative to the root font size, which helps layouts respect user font-size preferences.

Why do some projects use a 10px base?

Some teams set html { font-size: 62.5%; } so 1rem is about 10px for easier mental math. Consider accessibility before adopting it.

Does this convert EM too?

No. This tool focuses on PX and REM. EM depends on the current element's font size, so it should not be treated as the same conversion.

Is any CSS or design data uploaded?

No. Conversion happens locally in your browser with no server calculation or file upload.