WebToolsPlanet
Converter Tools

PX to REM Converter

Enter a pixel value and get the equivalent REM value instantly. Set any base font size — default is 16px — and convert single values or a bulk list at once.

Last updated: May 21, 2026

Client-Side Processing
Input Data Stays on Device
Instant Local Execution
Something wrong with this tool? Report it

Find this tool useful? Support the project to keep it free!

Buy me a coffee

What is PX to REM Converter?

REM (Root EM) is a CSS unit relative to the root element's font size — typically the `<html>` element. Most browsers default the root font size to 16px, making 1rem = 16px. Using REM instead of px allows your layout to scale with user font size preferences and makes responsive design easier.

The formula is simple: **rem = px ÷ base font size**. So 24px at a 16px base = 1.5rem. If your project sets a different root font size (e.g. `html { font-size: 10px }` to make 1rem = 10px), you can change the base here to match.

How to Use PX to REM Converter

1

Enter one or more px values in the input box (comma or newline separated)

2

Set the base font size if different from 16px

3

Copy individual results or the full table

4

Use the reference table below for common conversions at a glance

Common Use Cases

  • Front-end developers converting design specs (in px) to REM for accessible layouts.
  • Teams migrating a px-based stylesheet to REM for better scalability.
  • Developers using a 10px base trick (html { font-size: 62.5% }) for easier REM math.
  • Designers converting Figma measurements from px to REM before handing off to developers.
  • Developers checking rem equivalents for type scale or spacing values.
  • Students learning CSS units and how rem relates to pixel values.

Example Input and Output

Convert several common design sizes from px to REM at the default 16px base.

PX values
16
24
32
48
REM output
16px → 1rem
24px → 1.5rem
32px → 2rem
48px → 3rem

Privacy

All conversions are calculated in your browser. No data is sent to any server.

Tip: viewport and container units

REM works well alongside viewport units (vw, vh) for fluid typography. Use REM for base sizes and clamp() with vw for fluid scaling. This converter helps you establish your REM baseline.

Frequently Asked Questions

What is the default base font size?

The default base is 16px, which is what all major browsers use as the root font size unless overridden. If your CSS sets a different root font size (e.g. html { font-size: 10px }), enter that value in the base field.

What is the difference between REM and EM?

REM is always relative to the root (html) element's font size. EM is relative to the current element's font size, which can compound when nested. REM is generally more predictable for layouts and spacing.

How do I use the 10px base trick?

Setting html { font-size: 62.5% } makes 1rem = 10px (62.5% of 16px = 10px), so 24px = 2.4rem — much easier to read. Set the base to 10 here to see those values.

Can I convert multiple values at once?

Yes. Enter values separated by commas or newlines and the converter will produce a row for each one.

Related Tools

Part of a Collection