PX to REM and EM Converter
Convert pixels to rem and em (and back) based on your root and parent font sizes.
Common sizes
Why rem and em?
Using rem and em instead of fixed pixels in CSS respects the font size users set in their browser and makes responsive design easier. It's also a recommended accessibility practice.
Units
- px: fixed pixels
- rem: relative to the root (html) font size, usually 1rem = 16px
- em: relative to the parent element's font size
Easy conversion
Enter your root and parent font sizes, then type a value in any unit and the others update instantly. A table of common sizes (12px, 14px, 16px, 24px, 32px…) with rem equivalents serves as a ready reference. At a 16px root, 24px = 1.5rem.
How to use PX to REM and EM Converter
- Enter the root font size (16px by default).
- Set the parent font size if needed.
- Type a pixel, rem or em value.
- Copy the equivalent in the other units.
Why use this tool?
Quickly move pixel values from design files into accessible CSS units.
FAQ
Should I use rem or em?
Use rem for consistent sizes across the page; use em for values that should scale with the surrounding text, such as button padding.
Is setting the root font size to 62.5% a good idea?
It makes 1rem = 10px maths easy, but you must redefine the font size of every component. Most projects keep the 16px default.
Which unit should media queries use?
em is recommended for media queries for consistent behaviour when users zoom.
Related tools
CSS clamp() Generator
Create a fluid CSS clamp() value that scales between a minimum and maximum size with the viewport width.
Open toolGolden Ratio Calculator
Divide a length by the golden ratio (φ ≈ 1.618) and build a φ-based scale for layout and typography.
Open toolTouch Target Size Checker
Check a button or link size against WCAG 2.2, Apple HIG and Material Design touch target guidance.
Open toolWCAG Contrast Checker
Check the contrast ratio of text and background colours against WCAG AA and AAA.
Open tool