Design & Media
PX to REM Converter
Convert px to rem and back as you type, or convert a whole stylesheet at once. Works with any root font size.
Convert px to rem and back as you type, or convert a whole stylesheet at once. Works with any root font size.
What you can do
- Type in either box: px and rem convert both ways as you type.
- Paste a whole stylesheet and get every px value in rem, keeping 1px hairlines if you want.
- A table of common sizes (4–96 px) for your root font size, with Tailwind spacing equivalents.
- Any root size: 16px default, or 10px, 18px, whatever your html font-size is.
Part of IONIAN's Design & Media tools — Create QR assets, optimize visuals, validate color accessibility, and prep media deliverables.
Frequently asked questions
How do you convert px to rem?
Divide the pixel value by the root font size. With the browser default of 16px, 24px ÷ 16 = 1.5rem and 12px ÷ 16 = 0.75rem. To go back, multiply: 2rem × 16 = 32px.
Should I use rem or px in CSS?
Use rem for font sizes, spacing and layout so everything scales when a user raises their browser text size, which is an accessibility requirement in WCAG. Keep px for things that should not scale, such as 1px borders and shadows.
What is the difference between rem and em?
rem is relative to the root (html) font size, so 1rem is the same everywhere on the page. em is relative to the font size of the current element, so it compounds inside nested elements. rem is easier to predict for spacing and type scales.
Free to use, no sign-up. Need a custom version or a full build? IONIAN Digital ships production software, websites, and MVPs — start a project.