~/frontend-tools/px-to-rem-converter
PX to REM Converter
Convert between pixels and rem using any root font size. Type in either box, glance at the table of common sizes, or paste a whole stylesheet and convert every px value to rem in one go.
| px | rem | px | rem |
|---|
Convert a whole stylesheet
Using the PX to REM Converter
What rem means
One rem equals the font size of the root html element, 16px by default in every major browser. So 24px is 1.5rem, and 12px is 0.75rem. Because rem is relative, everything sized in rem scales together if the root size changes.
Why use rem
People who need larger text often raise their browser's default font size. Sizes in rem grow with that preference; sizes in px ignore it. Using rem for font sizes and spacing keeps your layout readable for those visitors and is a simple accessibility win.
Choosing the base
Keep the base at 16px unless your CSS sets a different root font size. Some projects set html { font-size: 62.5% } to make 1rem equal 10px for easier maths; if yours does, change the base here to 10.
Batch conversion
The batch box finds every pixel value in the CSS you paste and converts it, keeping other units untouched. Borders of 1px usually look better left in pixels, so you can choose to skip values below a threshold.
Frequently asked questions
Should I use rem or em?
Use rem for most sizing because it always refers to the root. em refers to the parent's font size, which compounds when nested; it is useful for spacing that should scale with a component's own text.
How many decimals should I keep?
Four decimals is plenty. Browsers round to fractions of a pixel anyway.
Does it work offline?
Once the page has loaded, yes. Nothing is sent anywhere.