What is the difference between rem and em in CSS?

rem (root em) is always relative to the root element font size — typically 16px set on the element. em is relative to the nearest parent element's font size, which can change throughout the DOM. This makes rem more predictable for layout and spacing, while em is useful for component-level scaling that should stay proportional to surrounding text.

Why should I use rem instead of px for CSS?

rem units respect the user's browser font size preference. If a user increases their browser's base font size for accessibility, elements sized in rem scale up automatically. Elements sized in px stay fixed regardless of user settings. For accessible, responsive design, rem is generally recommended for font sizes, spacing, and component dimensions.

What is the default base font size, and can I change it?

Most browsers default to 16px as the root font size, so 1rem equals 16px by default. However, you or your CSS framework can override this with html { font-size: 18px } or similar. This tool lets you set any base font size so conversions match your actual project setup.

When would I use em over rem?

em is useful when you want something to scale relative to its container. For example, setting button padding in em means the padding grows if you increase the button's font size — great for component-level responsive design. rem is better for global spacing and layout where you want consistent sizing across the page regardless of nesting.

How do I convert 14px to rem?

Divide the pixel value by the base font size: 14 ÷ 16 = 0.875rem. If your project uses a different base (e.g., 10px for easier math), it would be 14 ÷ 10 = 1.4rem. This tool handles the math instantly for any base size you configure.

Pixel ↔ REM/EM Converter

Convert CSS pixel values to rem and em units, and vice versa. Includes a reference conversion table.

Base Font Size (px)

Parent Font Size (px)

Pixel (px)

e.g. 24

Common Conversions (base 16px)

PX	REM
8px	0.5rem
12px	0.75rem
14px	0.875rem
16px	1rem
18px	1.125rem
20px	1.25rem
24px	1.5rem
32px	2rem
48px	3rem
64px	4rem

How to Use

Convert CSS pixel values to rem and em units, and vice versa. Includes a reference conversion table.

1In the 'Settings' section at the top, verify or adjust the base font size (default 16px) to match your project's root font size set on the html element.
2To convert px to rem or em: click the 'PX → REM/EM' tab, type a pixel value in the input field, and both rem and em results appear instantly below.
3Each result card shows the conversion formula (e.g. 24px ÷ 16 = 1.5rem) — useful for understanding the math or pasting into code comments.
4To convert rem or em back to px: click the 'REM/EM → PX' tab, enter a rem or em value, and the pixel equivalent is shown.
5Use the 'Common Conversions' table at the bottom for quick reference — it lists 10 standard pixel values and their rem equivalents at base 16px.

Key Features

Bidirectional conversion — px to rem/em and rem/em back to px
Configurable base and parent font sizes — match your actual project settings
Live formula display — shows the exact math for each conversion
One-click copy for rem, em, and px results
Reference conversion table — 10 standard pixel values at base 16px for quick lookup

Frequently Asked Questions

Learn More

Pixel to REM Converter — Why CSS Devs Should Ditch px for rem