Updated · Built and checked by the PlinzoTools team, formulas tested against published sources
Convert a size between px, rem, em, and pt.
1rem
CSS supports several length units that behave differently -- px is a fixed absolute size, rem scales with the root (html) font size, em scales with the parent element's font size, and pt is a print-oriented unit. This tool converts a value between any two, using a configurable root/parent font size.
Enter a value, choose the source and target units, and (if relevant) the root font size. The converted value appears instantly.
By default, 1rem = 16px (the typical browser default root font size) and 1pt = 96/72 px (the standard CSS pixel-to-point ratio). em is relative to the parent element's own font size, which this tool treats as configurable via the same root-font-size field for simplicity.
32px converts to 2rem at the default 16px root font size.
For fluid, viewport-responsive sizing instead of a fixed unit conversion, see the CSS Clamp() Calculator.
Every conversion goes through pixels as a middle step. The value you type is first turned into px, then from px into the unit you chose. The conversion factors are: rem multiplies by the Root Font Size field, em multiplies by that same field (this tool has no separate parent-size input, so em and rem give identical answers here), and pt multiplies by 96/72, which is about 1.3333. The final answer is rounded to at most four decimal places, and a blank or non-numeric value is treated as 0. If the Root Font Size field is empty or zero, the tool falls back to 16.
px = rem x root size | px = pt x 1.3333 | target = px / target factor
The root font size field should reflect the font-size actually applied to your html element. Most browsers default to 16px, but if your stylesheet sets html to a percentage or a fixed pixel value, use that resulting pixel number instead. Also remember that a visitor can change their browser font size, so a rem value is a ratio, not a promise of a specific pixel size on every screen. The pixel results shown here describe the default case.
In real CSS, em is measured against the font size of the parent element (or, for the font-size property itself, the parent's font size; for other properties like padding, the element's own font size). Nested elements can compound: a list inside a list with 0.9em text gets smaller at each level. This tool treats em as a single fixed factor, so use it for a one-off conversion at a known context size, not to predict compounding in a deep component tree. If you need the em value for a specific element, type that element's computed font size into the root field.
rem respects a user's browser-level font-size preference (an accessibility feature) -- a user who increases their browser's default font size sees rem-based text scale accordingly, while fixed px text stays the same size regardless.
em is relative to its own element's parent font size (so it can compound unpredictably in deeply nested elements), while rem is always relative to the single root html font size, making it more predictable for most layout purposes.
Points are a print-typography unit (1/72 of an inch), while CSS px is defined relative to a reference pixel density -- the standard conversion is 1pt = 4/3 px (96 CSS px per inch, 72 points per inch).
The tool has one Root Font Size field and uses it for both units. That is correct when the parent element's font size equals the root size, but in real layouts the parent may differ, so adjust the field to the parent size when converting em.
The answer is rounded to four decimal places, and trailing zeros are dropped, so 2 shows as 2 rather than 2.0000.
A blank or non-numeric value is treated as 0, so the result will be 0 in any unit. Type a valid number to get a meaningful conversion.
Yes. Pick rem as the source and pt as the target. Internally the tool converts rem to px using your root size, then px to pt.
Reference: MDN Web Docs