About the REM to PX Converter
Reading a stylesheet full of rem values and trying to picture the real size is slow, especially during a review or a bug hunt. This converter turns rem back into pixels so a rule can be compared against a design file or a measurement taken from a screenshot.
One rem equals the root font size, so with the default 16px setting 1.25rem renders at 20px and 0.5rem at 8px. Change the base field if the project applies html { font-size: 62.5% }, a trick that makes the root 10px and turns every rem into a tidy multiple of ten. The table under the result lists the rem values that appear most often in component libraries.
It is worth remembering that rem always looks at the root and never at the parent, which is exactly what makes it predictable inside deeply nested components. An element buried ten levels down gets the same pixel size for 1rem as one sitting at the top of the page. That is the key difference from em, which the EM to PX tool covers.
How to use
- Paste the rem values, one per line.
- Adjust Base font size to match the project root.
- Read the pixel equivalents.
- Copy the values or the table.
Common questions
- How many pixels is 1.5rem?
- 24 pixels with a 16px root. The answer changes if the root font size is different.
- Does a parent font size affect rem?
- No. Rem is measured against the root element only, so nesting has no effect on it.
- What does the 62.5% root trick do?
- It sets the root to 10px so 1.4rem reads as 14px. Enter 10 in the base font size field to match that setup.
- Can I paste a whole stylesheet?
- Paste the numeric values one per line. The tool converts numbers rather than parsing full CSS declarations.