Tools
PX to REM converter
Convert pixels to rem and back based on your site's root font size.
About this tool
This tool converts pixel values to rem, and back again, based on your site's root font size. It comes in handy whenever you write CSS with relative units: you turn the pixel sizes from a design file into rem, respect the reader's browser font settings and keep a consistent scale across type, margins and spacing.
Set the root size in the “Base font size” field (16 px by default). Then type a pixel value and the rem equivalent appears straight away. The arrows button swaps the direction so you can go from rem to pixels. Each result has a button that copies it with its unit, and in the “Quick reference” table you can click any common value from 8 to 48 px to load it.
The maths is a simple division carried out in your browser: nothing is sent to a server and there is no account to create. Rem values are rounded to four decimal places and pixels to two. The tool does not read your stylesheet or convert whole CSS files; it is designed for quick look-ups while you code.
Frequently asked questions
How many pixels is 1 rem?
It depends on the font size of the root (html) element. Browsers default to 16 px, so 1 rem equals 16 px unless the user or your CSS changes it.
How do I convert px to rem?
Divide the pixel value by the root font size. With a 16 px base, 24 px is 24 / 16 = 1.5 rem.
What is the difference between rem and em?
Rem is always relative to the root element's font size, while em is relative to the parent element's. That makes rem more predictable when components are nested.
Why use rem instead of pixels?
Rem respects the font size readers choose in their browser. If they enlarge it, everything sized in rem scales in proportion, which is better for accessibility.