How the units relate
A rem is the root font size, which browsers default to 16 pixels. An em is the font size of the current element, which equals the root at the top level. A point is 1/72 of an inch and a CSS pixel is 1/96 of an inch, so one point is 1.333 pixels.
A percentage of the root is the same relationship as rem, expressed out of 100.
Worked example
Sixteen pixels at a 16 pixel root is 1 rem, 1 em, 12 points and 100 per cent of the root. Changing the root to 20 pixels makes 16 pixels 0.8 rem and 80 per cent.
The pixel value stays the same; only the relative figures move. That is the point of using rem: the design scales with the root.
When each unit is right
Use rem for typography and spacing that should respect a user's browser font setting. Use px for borders and hairlines that should not scale. Use em for spacing that should scale with the component's own font size, and percentages for fluid widths.
Mixing units carelessly is a common source of layouts that break when someone changes the root font size.
Limits of this calculator
It treats em as equal to rem, which is exact only at the root level. Inside a component with its own font size, an em is that size instead.
It does not handle viewport units, container query units, ch, ex or lh, and it does not know your stylesheet's cascade.
For layout ratios rather than type sizes, use the aspect ratio calculator.
Inputs for the CSS calculator
Value to convert
The number you want to convert, in the unit you choose below.
Unit of that value
Pixels, rem, em, points or a percentage of the root.
Root font size
The root font size your page uses. Browsers default to 16 pixels.
CALCULATOR QUESTIONS
CSS calculator questions
Should I use px or rem?
rem for anything that should respect the user's font size setting, px for hairlines and borders that should stay fixed.
Is 1em always 16px?
Only at the root. Inside a component, 1em is that component's font size.
Why is 1pt not 1px?
A point is 1/72 inch and a CSS pixel is 1/96 inch, so 1pt equals 1.333px.
Does changing the root break my layout?
It will if you mixed px and rem. Sizes in rem scale together; fixed px values do not.