JSON Formatter JSON Validator JSON Minifier JSON Diff JSON to CSV JSON to YAML JSON Sort Keys JSON Viewer JSON Escape/Unescape JSON to XML XML to JSON YAML to JSON JSON to TypeScript JSON to PHP Array JSON Stringify See all JSON tools →
CSV to SQL CSV to Markdown CSV Diff CSV to JSON CSV to XML CSV Deduplicator See all CSV tools →
Sort & Dedupe Lines Slug Generator Case Converter Character & Word Counter Text Diff Regex Tester Find & Replace Reverse Text Text Repeater Remove Duplicate Lines Whitespace Remover Remove Line Breaks Morse Code Translator ROT13 / Caesar Cipher NATO Phonetic Alphabet LLM Token Counter Word Frequency Counter Add Line Numbers Remove Accents Strip HTML Tags Extract Emails Extract URLs Remove Emojis Count Occurrences Remove Extra Blank Lines Remove Duplicate Words Word Wrap See all Text tools →
URL Parser HTML Entity Encoder HTML Entity Decoder Base64 Encoder Base64 Decoder URL Encoder URL Decoder JWT Decoder JWT Encoder Text to Hex Hex to Text Text to Binary Binary to Text Base32 Encode Base32 Decode User Agent Parser HTTP Status Codes MIME Type Lookup See all Encoding tools →
Hash Generator MD5 Hash Generator SHA-256 Hash Generator SHA-512 Hash Generator SHA-1 Hash Generator HMAC Generator See all Hash tools →
Markdown to HTML HTML Formatter XML Formatter SQL Formatter YAML Formatter CSS Formatter CSS Minifier JavaScript Formatter See all Formatters tools →
PX to REM Converter Data Size Converter Unix Timestamp Converter Number Base Converter Roman Numeral Converter Temperature Converter Length Converter Weight Converter Speed Converter Area Converter Volume Converter Time Duration Converter Angle Converter Pressure Converter Energy Converter Number to Words Cron Expression Parser Percentage Calculator Aspect Ratio Calculator Average Calculator Hex to Binary Binary to Hex Hex to Decimal Decimal to Hex Binary to Decimal Decimal to Binary Kilometers to Miles Miles to Kilometers Centimeters to Inches Inches to Centimeters Feet to Meters Meters to Feet Celsius to Fahrenheit Fahrenheit to Celsius Kilograms to Pounds Pounds to Kilograms MPH to KM/H KM/H to MPH See all Converters tools →
Color Converter Color Contrast Checker UUID Generator Lorem Ipsum Generator Password Generator Passphrase Generator Username Generator CSS Gradient Generator Box Shadow Generator Color Palette Generator Cubic Bezier Generator QR Code Generator Meta Tag Generator Border Radius Generator Glassmorphism Generator SVG Blob Generator Placeholder Image Generator See all Generators tools →
Guides Pricing

Guide

px vs rem in CSS: which to use and how to convert

When to use px, rem, or em in CSS, why rem is better for accessibility, and how the px ÷ root-size math works — with a live converter to follow along.

Try it — PX to REM Converter
⤢
PX to REM Converter
Pixels (px)
REM (rem)
EM (em)
Points (pt)
Enter a value to convert between CSS units

Designers hand off pixel values, but modern CSS is usually written in rem so the page respects the user's font-size preference. This guide explains the difference between px, rem, and em, when to use each, and how the conversion works. Use the converter above to turn any value as you read.

The three units

  • px — an absolute pixel. 16px is always 16 pixels, regardless of any font settings.
  • rem — "root em". Relative to the root element's font size. With the default 16px root, 1rem is 16px and 1.5rem is 24px.
  • em — relative to the current element's font size, which means it compounds when elements are nested inside one another.

How the conversion works

The math is simple division against the root font size:

rem = px ÷ root font size
px  = rem × root font size

So with a 16px root, 24px is 24 ÷ 16 = 1.5rem, and 2rem is 2 × 16 = 32px. If your project sets html { font-size: 10px } to make the math easier, change the root size field in the converter and the results update.

Why rem is better for accessibility

When a user increases their browser's default font size — something many people rely on — elements sized in rem scale up with it, because they are all measured against that root size. Elements sized in px stay fixed and can break layouts or stay uncomfortably small. Sizing typography and spacing in rem keeps your design usable at any base size.

A common pattern is to size almost everything in rem, and reserve px for things that genuinely should not scale, such as 1px borders.

Try it

Enter a value above, pick its unit, and set your root font size to see it converted to px, rem, em, and pt at once — handy when translating a design's pixel values into a scalable stylesheet.

Frequently asked questions

Divide the pixel value by the root font size. With the default root of 16px, 24px ÷ 16 = 1.5rem. Change the root size in the converter above if your project sets html { font-size } to something else.
rem is always relative to the root element's font size, so it is predictable everywhere. em is relative to the nearest parent's font size, so it compounds when elements nest. Use rem unless you specifically want that compounding.
Prefer rem for font sizes, spacing, and layout so the page scales with the user's browser font-size preference, which matters for accessibility. px is fine for hairline borders and details that should not scale.
Browsers set the default root font size to 16px. Unless you override html { font-size }, 1rem equals 16px, which is why the converter defaults to a 16px root.
No. px and rem resolve to the same computed pixel value at render time, so there is no measurable performance difference. The choice is about scalability and maintainability, not speed.

Related

Tool PX to REM Converter Tool Color Converter Tool Data Size Converter
Esc
↑↓ navigate ↵ open Esc close