Why should I use rem instead of px?

rem units scale with the user's browser font size preference, improving accessibility. Users who increase their default font size will see your layout scale proportionally instead of being stuck at fixed pixel sizes.

What base size should I use?

Most projects use 16px (the browser default). Some design systems use 10px (html { font-size: 62.5% }) for easier mental math, where 1.6rem equals 16px.

PX to REM Converter in Your Browser

Convert pixel values to rem for responsive, accessible CSS. Set your project's base font size and get instant, accurate conversions. This browser-based tool helps you build consistent, scalable design systems.

Open CSS Unit Converter

Quick Conversion Table

Base: 16px

px    rem       px    rem
──    ────      ──    ────
4     0.25      24    1.5
8     0.5       32    2
12    0.75      40    2.5
14    0.875     48    3
16    1         64    4
20    1.25      80    5

Common Use Cases

Converting Figma or Sketch pixel values to rem for CSS
Building a spacing scale in rem units
Ensuring font sizes respect user browser zoom settings

Frequently Asked Questions

Why should I use rem instead of px?: rem units scale with the user's browser font size preference, improving accessibility. Users who increase their default font size will see your layout scale proportionally instead of being stuck at fixed pixel sizes.
What base size should I use?: Most projects use 16px (the browser default). Some design systems use 10px (html { font-size: 62.5% }) for easier mental math, where 1.6rem equals 16px.