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.

Online Loan & Mortgage Calculator - Instant Amortization Schedule

Use this Loan Calculator / Mortgage Calculator to estimate monthly payment, total interest, and an amortization schedule locally. Enter amount, rate, and term to calculate now with instant charts.

Online Investment & ROI Calculator - Compound Interest Visualizer

Use this Investment Calculator / ROI Calculator to estimate starting capital, monthly contributions, annual return, and inflation-adjusted results locally. Calculate projected returns with an instant compound interest chart, ROI, and yearly schedule.

APR to APY Calculator - Convert Nominal & Effective Rates

Use this APR to APY Calculator to convert between APR and APY locally. Enter a rate, choose compounding frequency, and see the effective interest rate, spread, and frequency comparison instantly.

Profit Margin Calculator - Margin vs Markup Converter

Use this Profit Margin Calculator to calculate gross profit, Markup, Margin, and selling price locally. Enter cost and price, or cost and target margin, then calculate your margins instantly.

CPM & CPC Calculator - Ad Spend and CTR Online Tool

Use this CPM Calculator and CPC Calculator to estimate ad spend, impressions, clicks, CPM, CPC, and CTR locally. Enter budget and target costs to plan campaign scenarios instantly.

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.