Designs are usually measured in pixels, but CSS written in rem scales with the visitor's font size settings, which makes a site easier to read for people who need larger text. This converter moves between the two using your root font size.
How it works
One rem equals the font size of the root html element. Browsers set that to 16px by default, so 1rem is 16px unless your CSS changes it.
To convert pixels to rem, divide by the root font size. To convert rem to pixels, multiply by it.
Points are a print unit. In CSS, 1px is defined as 0.75pt, so the calculator multiplies pixels by 0.75.
A worked example
With the default 16px root size, 24px is 1.5rem (24 ÷ 16), and 18pt in print terms. Going the other way, 0.875rem is 14px.
Questions people ask
What is the difference between rem and em?
Rem is always relative to the root font size, so it means the same thing everywhere on the page. Em is relative to the font size of the element's parent, so it compounds when elements are nested.
Should I set the root font size to 62.5%?
Some sites set html { font-size: 62.5% } so that 1rem equals 10px and the math is easier. It works, but you then need to set a readable size on the body again. Keeping the default 16px and using a converter avoids that extra step.
Why use rem at all if I design in pixels?
If a visitor increases their browser's default font size, text sized in rem grows with it and text sized in px does not. Using rem for font sizes, and often for spacing, respects that setting.