Converters

PX to REM Converter

Convert pixels (PX) to REM units and vice versa. Customize the root font size and view a responsive CSS size reference table.

Conversion Calculator
px
px
rem
Quick Pixels:
CSS Snippet 
font-size: 1rem; /* 16px */
Conversion Table (Base 16px)
PX REM Usage Scenario (Example)

Related Tools You Might Need

Base64 Encoder & Decoder Encode text to Base64 or decode Base64 back to plain text instantly. Safe, secure, client-side converter.
Binary Code Translator Convert plain text into binary numbers (0s and 1s) and decode binary sequences back into human-readable text instantly.
Hex to Text Converter Convert plain text into Hexadecimal (base 16) and decode Hex back to readable ASCII or UTF-8 text with customizable separators.

What is this tool?

The PX to REM Converter is a utility for web developers and designers to quickly translate absolute pixel dimensions (PX) to relative, accessible layout units (REM). By converting absolute screen values to relative layout values, you can build responsive, accessible, and user-configurable interfaces.

How to use it

1. Set your base document font-size in the "Base Font Size" box (usually 16px by default).

2. Type in the "Pixels (PX)" input to see the REM value update instantly.

3. Alternatively, enter a REM value to calculate the corresponding pixels.

4. Copy the auto-generated CSS code snippet for direct paste into your stylesheet.

Pro tips

  • Tailwind CSS and many modern design systems use a base of 16px (1rem) for their spacing scale (e.g., p-4 is 1rem/16px).
  • Keep the base size customizable to match different frameworks or custom themes that reset the html font-size to 62.5% (10px) to make math easier.

Frequently asked questions

What is a REM unit in CSS?

REM (Root EM) is a CSS unit of measurement relative to the font-size of the root HTML element (usually the <html> tag). It is widely used in responsive typography and layouts.

How is PX converted to REM?

The conversion formula is: REM = Pixels / Base Font Size. For example, if your base font size is 16px, then 20px is converted to REM as: 20 / 16 = 1.25rem.

Why should I use REM instead of PX?

Using REM units improves accessibility. When users change their browser's default font size (e.g. for readability), REM-based designs automatically scale up or down to respect the user's settings, whereas PX-based layouts stay fixed.