# PX to REM Converter

Canonical URL: https://offlineutils.com/px-to-rem-converter
Category: CSS
Published: 2026-07-14
Publisher: offlineutils.com
Runs entirely in the browser; nothing entered into the tool is uploaded.

> A PX to REM Converter turns pixel values into rem units and back, based on a configurable root font size (16px by default), and shows a reference table of common values — all computed in your browser.

rem units scale with the root font size, which lets layouts respect a user's browser font-size preference — better for accessibility than fixed pixels. This converter does the math both ways: type a pixel value to get rems, or a rem value to get pixels, at whatever root size you set. A reference table lists the rem equivalents of common pixel steps (1 to 96px) with copy buttons. Everything runs locally — nothing is uploaded.

## Features

- Two-way px and rem conversion
- Configurable root font size (defaults to 16px)
- Reference table of common px values with rem equivalents
- Copy any rem value with one click
- Accurate to four decimal places, trailing zeros trimmed
- Runs entirely in your browser — nothing uploaded

## Use cases

- Converting a Figma spec in pixels to rem for an accessible stylesheet
- Working out the rem value for a 14px caption at a 16px root
- Migrating a codebase from px to rem units
- Setting media-query and spacing values in scalable rems

## How to use it

1. **Set the root size** — Confirm or change the root font size (16px by default).
2. **Enter a value** — Type a pixel value to get rems, or a rem value to get pixels.
3. **Copy the result** — Copy the converted value, or grab a common value from the reference table.

## When to use it, and when to use something else

- **vs Doing the division by hand** — use PX to REM Converter when you want a table of common values and a non-16px root handled for you. Use Doing the division by hand when it's a single value at a 16px root — 16px = 1rem is easy.
- **vs A CSS calc() at runtime** — use PX to REM Converter when you want a concrete rem number to commit to your stylesheet. Use A CSS calc() at runtime when you specifically want the value computed live in the browser.

## Frequently asked questions

### How do I convert px to rem?

Divide the pixel value by the root font size. At the default 16px root, 24px / 16 = 1.5rem. Change the root size in the tool if your html element uses a different font-size.

### Why use rem instead of px?

rem units are relative to the root font size, so they scale when a user changes their browser's default font size — important for accessibility. Fixed px values ignore that preference.

### What root font size should I use?

Most browsers default to 16px, and that's the right assumption unless you've set the html font-size to something else. The tool lets you set any root size.

### Is rem better than em?

rem is always relative to the root, so it's predictable. em is relative to the nearest parent's font size, which compounds through nesting — useful sometimes, but easier to get wrong for global sizing.

## Related tools

- https://offlineutils.com/css-playground
- https://offlineutils.com/border-radius-generator
- https://offlineutils.com/css-gradient-generator