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

FIRE Calculator 2026 (Inflation Adjusted) | Retirement Gap Simulator

The 2026 FIRE Calculator (Inflation Adjusted). Simulate real purchasing power, analyze retirement savings gaps, and generate a visual wealth roadmap. One-click CSV export for your Excel or Notion finance dashboard. 100% Private, client-side calculation.

Position Size Calculator - Risk-Based Trade Sizing

Calculate trade position size from account balance, risk %, entry, and stop loss. Runs locally in your browser with no uploads, so you can compare risk scenarios before you trade.

Compound Interest Calculator | Free APY & Investment Chart

Calculate compound interest from principal, recurring contributions, APY, and time. Visualize principal, interest, and final balance with a local interactive chart.

PUBG Erangel Interactive Map 2026: Secret Basements & Loot Guide

Struggling to find Erangel secret rooms? Use our 2026 interactive map to locate all 15 red-door entries, key spawns, and T3 loot heatmaps. Privacy-first & free.

PUBG Taego Secret Room Map 2026: Key Spawn & Hidden Locations

Definitive Taego map for 2026. With Error Spaces removed, identify "Blue-Roof" houses for crate-tier loot and Self-AEDs. Privacy-first, forever free.

PUBG Vikendi Map 2026: Bear Caves, Lab Camps & Secret Loot

Vikendi 2026 tactical guide. Track deadly Bear Cave entrances, Lab Camp security keys, and Thermal Scope spawn zones. Avoid Polar Bears, grab loot.

PUBG Rondo Interactive Map 2026: Security Keys & Safes Guide

Master Rondo 2026 with our 8x8 tactical map. Locate every Security Door, Keycard spawn, and Safe for maximum gold. Privacy-first & free.

Universal Image Stamper Pro: SVG & WebP Support, Lossless Annotation 2026

Struggling with blurry markups? EasyTools offers a universal stamper supporting lossless SVG scaling and high-quality WebP export. Preserve transparency and export JSON data locally.

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.