How to use the Pixel to REM Converter
- 1. Pick a directionpx to rem, or rem to px.
- 2. Type valuesEnter one or more values separated by spaces or commas.
- 3. Copy the tableConvert and copy all results at once.
Why use rem
rem means "root em": a multiple of the font size on the <html> element. Browsers default that to 16px, so 1rem = 16px. When a visitor raises their browser's default font size for easier reading, everything sized in rem grows with it. Pixel-sized text does not, which is an accessibility problem.
The formulas are simple: rem = px ÷ root size and px = rem × root size. Many teams use rem for font sizes and spacing, and keep px for thin details like 1px borders.
Worked example
With the default 16px root, the sample values convert as follows: 12px = 0.75rem, 14px = 0.875rem, 16px = 1rem, 18px = 1.125rem, 24px = 1.5rem, 32px = 2rem and 48px = 3rem. If a project sets html { font-size: 62.5%; }, the root becomes 10px, so 24px is 2.4rem. Set the root size to 10 to match.
rem vs em: em is relative to the parent's font size, so it compounds in nested elements (1.2em inside 1.2em is 1.44 times the base). rem always refers to the root, which makes it much more predictable. A quick way to switch an existing stylesheet is to convert font sizes first, then padding and margins, checking the layout in the browser after each step.
Frequently asked questions
What root size should I use?
16, unless your CSS changes the font-size on . Check it in your browser's DevTools.
Should borders be in rem?
Usually not. Thin borders look best at exact pixels like 1px.
Can I paste values with px at the end?
Yes. px and rem units are removed automatically before converting.
Is the converter free?
Yes. Converting the first time asks for your name and WhatsApp number once, and every Uncodemy tool then opens without the form.