📐

px / rem / em Converter

Convert between px, rem, and em units. Set your base font size, type in any field, and all others update instantly.

Root font size (html):
px
px
pixels
rem
root em
em
local em
Common Sizes
${[10,12,13,14,16,18,20,24,28,32,36,40,48,56,64,72,96].map(n=>``).join('')}
Tailwind Text Size Reference
Reference Table
#pxremempt

About PX to REM Converter

PX to REM Converter converts CSS pixel values to rem (root em) and em (local em) units and back, using a configurable root font size that defaults to the browser standard of 16px. Type into any of the three unit fields and the other two update immediately — no button click required — so you can iterate through values as fast as you can type.

A scrollable reference table lists px/rem/em/pt equivalents from 1px to 128px with adjustable step sizes, and a Tailwind CSS text-size reference panel shows rem values for every text size class from text-xs to text-8xl. All calculations run instantly in the browser with no dependencies or network calls.

Common Use Cases

How to Use

  1. Set the Root font size at the top to match your project's html CSS font-size (most commonly 16px). Use the preset buttons or type directly.
  2. Enter a value in the px, rem, or em field — the other two update automatically.
  3. Click any size in the "Common Sizes" row or any Tailwind badge to instantly load that value into all three fields.
  4. Use the Reference Table below to browse all sizes at once; click any row to load that px value into the converter.

Frequently Asked Questions

What is the difference between rem and em?

Both rem and em are relative font-size units, but they have different reference points. rem (root em) is always relative to the font size set on the <html> element — typically 16px in browsers — so 1rem = 16px everywhere in the document regardless of nesting. em is relative to the font size of the element's own parent, which means nested elements can compound: a 1.2em element inside a 1.2em parent renders at 1.44× the root size. Rem is generally safer for layout and typography because it avoids compounding.

Why should I use rem instead of px in CSS?

Pixel values are absolute and do not respect a user's browser font-size preference. When a user with low vision increases the browser's default font size from 16px to 20px, elements sized in px remain the same, breaking readability. Rem-sized elements scale proportionally with the user's preference, which is an accessibility requirement under WCAG 1.4.4 (Resize Text). Using rem also makes global scaling trivial — changing the root size once updates the entire layout.

How do I convert px to rem in JavaScript at runtime?

Use parseFloat(getComputedStyle(document.documentElement).fontSize) to get the actual root font size in px at runtime, then divide: remValue = pxValue / rootFontSize. This handles cases where the root font size is set via CSS variables or a theme rather than a hardcoded value, ensuring your conversion is always accurate for the current document.

Advertisement