TYPE & SPACING STUDIO
PX to REM conversion with 16px and 20px root sizes
REM conversion is division: rem = pixels ÷ root font size in pixels. The important input is the computed font size of the root html element. A convenient 16px assumption is not a measurement of every page.
Worked example: 24px at two root sizes
At a 16px root, 24 ÷ 16 = 1.5rem. At a 20px root, the same 24px target is 1.2rem. Conversely, a fixed 1.5rem token becomes 30px when the root grows to 20px. Decide whether you want to preserve a pixel measurement during a migration or keep a relative scale that responds to the root.
| Pixels | 16px root | 20px root |
|---|---|---|
| 8 | 0.5rem | 0.4rem |
| 12 | 0.75rem | 0.6rem |
| 16 | 1rem | 0.8rem |
| 24 | 1.5rem | 1.2rem |
| 32 | 2rem | 1.6rem |
| 48 | 3rem | 2.4rem |
| -8 | -0.5rem | -0.4rem |
Build a small token scale
Convert named spacing and type measurements before editing many components. A shared token lets you inspect a whole scale in one place. The example below assumes a 16px root. A negative spacing token is useful for a margin, but a negative font-size is not a meaningful target.
:root {
--space-small: 0.5rem; /* 8px at 16px root */
--space-medium: 1rem; /* 16px at 16px root */
--title-size: 1.5rem; /* 24px at 16px root */
}Check the actual page
Inspect the computed font size of the html element in your browser developer tools. A site's CSS or the user's settings can change it. Test your layout with the intended content, wider text, narrow viewports and increased text/zoom settings. Relative units help express scalable relationships; replacing px with rem alone does not establish accessible design.
Handle rounding deliberately
A conversion such as 1px ÷ 3px gives a repeating decimal. The single-value tool displays a practical floating-point result. The batch CSS kit rounds to six decimal places. Pick a consistent precision for your design tokens and visually inspect thin borders or tiny offsets rather than promising every rounded value will render identically.
Move from one value to a CSV scale
Use the free workbench when trying one measurement or testing a different root. The prepared offline CSS kit takes name,px CSV rows and writes CSS custom properties, retaining a comment with each source measurement. It rejects duplicate or unsafe names and refuses to overwrite an existing output file. The product page shows the sample and current purchase availability.
Use a reference with your own root size
The live spacing reference uses the root size currently entered in the workbench. For a 20px root, an 8px spacing token is 0.4rem and a 24px heading is 1.2rem. If the root is blank or invalid, the reference clears instead of displaying values for an old root. Enter a valid root and calculate again before copying production CSS.
Reproduce this example
1.2 rem. The CSS file assumes the page already has a computed 20px root; it does not override browser preferences.
Download root-20px.css — synthetic data you can save or reference. The diagnostic samples contain no real addresses, credentials or hosted streams. Scenario CSVs document inputs; the calculators do not import CSV.
Common questions
Is 16px always the root font size?
No. Read the computed html font size for the page you are changing. The converter lets you set that value explicitly.
What is the difference between rem and em?
REM uses the root font size. EM depends on the relevant element's font size and the property being evaluated; nested rules can behave differently.
Can I convert a negative value?
Yes, when the destination CSS property allows it, such as certain margins. The root size must remain positive.
Try it with your own scenario
The tool is free to use. Product inputs stay in the local browser workspace. Provider links, where present, are separate from the calculation.
References and scope
Updated 2026-09-24. Examples are illustrative calculations, not measured customer outcomes. Provider prices and terms must be checked at purchase time.