PX to REM Calculator
Convert between px and rem against a chosen root font-size. By default 1rem equals 16px, the browser default, but you can change the root to match your own setup.
How to convert px to rem
- Pick a direction: px to rem, or rem to px.
- Set the root font-size that 1rem should equal, usually 16px.
- Type your value and copy the converted result.
Examples
Convert a pixel size to rem
24px at a 16px root
1.5rem
Convert rem back to pixels
1.5rem at a 16px root
24px
Frequently asked questions
What is rem in CSS?
A rem is a length unit equal to the root font-size of the page, set on the html element. If the root is 16px then 1rem is 16px, 1.5rem is 24px, and so on. Sizing in rem lets a whole layout scale with one root value.
How do I convert px to rem?
Divide the pixel value by the root font-size. With the common 16px root, 24px is 24 divided by 16, which is 1.5rem. To go the other way, multiply the rem value by the root.
Why is the default root font-size 16px?
Browsers use 16px as the default font-size for the html element unless a stylesheet or the user changes it. That is why 16px is the usual baseline for px to rem conversions.
What is the difference between rem and em?
A rem is always relative to the root font-size, so it stays consistent across the page. An em is relative to the font-size of the current element, so it can compound when elements are nested.
Should I use rem or px for font sizes?
Rem is preferred for type and spacing because it respects the user's chosen base font-size and scales the whole interface from one value, which helps accessibility. Px is fine for fixed details like hairline borders.
Related tools
PX to EM Calculator
Convert px to em and em to px against a parent font-size. Em is relative to the parent element, not the root. Set the parent and copy the result.
Type Scale Calculator
Generate a modular type scale from a base size and a ratio. Get px and rem for every step, from small print to display headings. Free and exact.
CSS clamp() Calculator
Generate a responsive CSS clamp() for fluid font sizes and spacing. Set a min and max size with viewport breakpoints and copy the clamp() value instantly.
.env to JSON
Convert a .env file to JSON, or JSON back to .env. Parses KEY=value lines, comments, quotes and export. Runs entirely in your browser.
ASCII Table
Full ASCII table for all 128 codes with decimal, hex, octal and binary values, character names and descriptions. Search by code, hex or character.
Aspect Ratio Box Generator
Generate CSS for a responsive aspect-ratio container. Use the modern aspect-ratio property or the padding-top fallback, then copy the ready code.