CSS Unit Converter (px ↔ rem ↔ em ↔ pt)

Convert between CSS units. Set your project's root font size for accurate rem calculations.

Features

Custom root font size
px ↔ rem ↔ em ↔ pt
CSS code snippet output

How to Use

1. Set the root font size (default 16px).

2. Type a value into any unit field.

3. All other units update automatically.

About this tool

Pixels are easy to reason about, but rem units scale with the user's preferred font size, which matters for accessibility. This converter keeps px, rem, em and pt in sync based on a root font size you choose — 16px by default, which is the browser standard. Type a value in any field and the others update, so you can translate a design handed over in pixels into rem for your stylesheet, or check what a 12pt print size equals on screen. The conversion assumes em is measured against the same base size as rem, which is true for elements whose parent uses the root font size; nested components with their own font sizes will differ.

Frequently Asked Questions

What is the difference between rem and em?
rem is relative to the root element's font size, so 1rem is the same everywhere on the page. em is relative to the font size of the current element's parent, so it compounds in nested elements. This converter treats em as relative to the root size you enter.
Why should I use rem instead of px for font sizes?
If a visitor increases the default font size in their browser settings, rem-based text grows with it, while text set in px ignores that preference. Using rem for type and spacing makes a site more comfortable for people with low vision.
How are points converted to pixels?
CSS defines 1 inch as 96px and 72pt, so 1pt equals 4/3 px (about 1.333px). A 12pt font is therefore 16px.
Should I change the root font size to 62.5%?
Setting html { font-size: 62.5% } makes 1rem equal 10px, which simplifies maths but shrinks default text and must be compensated everywhere. Many teams now keep the default 16px and use a converter like this instead.
Does 1px in CSS equal one physical screen pixel?
Not on high-density displays. A CSS pixel is a reference unit; on a device with a pixel ratio of 2, one CSS pixel is drawn with two physical pixels in each direction.

Related Tools