Skip to content
ToolsMinify logo
Converter Tools

PX to REM Converter

Convert CSS lengths between px, rem, and em with a configurable base font size (browsers default to 16px).

About PX to REM Converter

Convert CSS lengths between px, rem, and em with a configurable base font size (browsers default to 16px). Type any value and the other units update instantly, then copy ready-to-paste CSS like `1.5rem`. A quick-reference table lists common pixel sizes at your current base - handy for Tailwind-style scales and root-font-size experiments. Everything runs in your browser. Pair it with the HEX to RGB Converter or the Pixels to Inches Converter.

How to Use PX to REM Converter

  1. Set the base font size in px (default 16), or tap a preset like 14 or 18.
  2. Enter a value in px, rem, or em - the other two fields update automatically.
  3. Copy individual units or all three at once for your stylesheet.
  4. Use the quick-reference table for common sizes at the current base. Nothing is uploaded.

PX to REM Converter Examples

16px at a 16px base

16px = 1rem = 1em when the base font size is 16px (the browser default).

24px to rem

24px / 16 = 1.5rem. Useful for medium headings and spacing tokens.

Custom 10px root

If html { font-size: 10px }, then 20px = 2rem. Change the base field to 10 and convert.

0.875rem body text

0.875rem at a 16px base equals 14px - a common small body size.

Common Use Cases

  • Convert design-tool px values into rem for fluid CSS
  • Check rem and em against a custom root font size
  • Build or audit a spacing scale with the quick-reference table
  • Translate Tailwind-like px steps into rem tokens
  • Preview em vs rem using the same reference base

Frequently Asked Questions about PX to REM Converter

How do I convert px to rem?
Divide pixels by your root font size in px. With the default 16px base, rem = px / 16. Example: 24px / 16 = 1.5rem. This tool does the math as you type.
What is the difference between rem and em?
rem is relative to the root element font size. em is relative to the parent element's font size. Here both use your chosen base so you can compare them against one reference size.
What base font size should I use?
Most browsers use 16px when html has no font-size set. If your design system sets html { font-size: 62.5% } or 10px / 18px, enter that pixel value as the base.
Can I convert rem or em back to px?
Yes. Enter a rem or em value and the px field updates. Formula: px = rem (or em) times the base font size.
What is the quick-reference table for?
It lists common px sizes (4 through 96) with rem and em at your current base so you can scan a scale without typing every value.
Does my input leave the device?
No. The PX to REM Converter runs entirely in your browser. Values are not uploaded or stored on a server.

Related Tools

Pixels to Inches Converter

Convert pixels to inches and inches to pixels at any DPI. Free px to inches calculator for web (96 DPI) and print (300 DPI).

HEX to RGB Converter

Convert HEX to RGB (and back) with HSL, CMYK, a tint-shade ramp, WCAG contrast cards, and a CSS token snippet - free online color code converter.

RGB to HSL Converter

Convert RGB to HSL and HSL to RGB instantly. Free online color converter with a live swatch and copy-ready rgb() and hsl() CSS.

CSS Gradient Generator

Build CSS linear, radial, and conic gradients with a live preview. Pick color stops, copy background CSS, and paste into your stylesheet. Runs in your browser.