CSS unit converter (px / rem / em / pt)

Convert a value between pixels, rem, em, and points directly in your browser.

Example:

How it works

A typical use case in front-end integration: a Figma mockup expresses all sizes in pixels (16px, 24px, 32px...), but accessibility best practices recommend using relative units like rem for CSS, so text scales correctly when a user increases their browser's default font size. Enter the pixel value read from the mockup, choose "px" to "rem" with the site's usual base font size (16px by default), and paste the result directly into your CSS.

Why is the base font size needed?

rem and em are relative units: 1rem equals the font size of the root element (html), while 1em equals the font size of the current element. Without knowing this reference size (usually 16px by default in a browser, but sometimes changed by a stylesheet), it's impossible to convert to or from px. That's why this tool asks you to specify the base font size to use as a reference.

What's the difference between rem and em?

rem ("root em") is always calculated relative to the font size of the document's root element, which makes it predictable everywhere on a page. em is calculated relative to the font size of the nearest parent element, which can compound. This tool treats both the same way, using the base size you provide as a common reference.

Conversion runs entirely in your browser thanks to WebAssembly: your values are never transmitted to a server.