Convert CSS units between pixels, rem, em and points (assuming the default 16px root font size).
Design • CSS units
All 4 units on the CSS px / rem / em Converter are defined against the Pixels (px), so each result is one conversion factor away from a single reference rather than the end of a chain of roundings.
The conversion this page is most often opened for is ready before you type anything: 1 px = 0.0625 rem. Change either side and every row in the table recalculates with it.
Everything runs in your browser — no account, no uploads, nothing leaves your device.
Modern responsive web design mixes CSS units: pixels (px) are fixed, while rem and em scale with font size (1 rem = 16px by default). Converting between px, rem, em and points keeps typography and spacing consistent and accessible across devices.
Front-end developers use this to translate a designer's pixel values into scalable rem/em. Enter any value to see the equivalents, assuming the standard 16px root font size.
The point row exists for print rather than screens, and its factor is fixed by two competing definitions of an inch: 72 points to the inch in typography against 96 CSS pixels to the inch, giving exactly 4/3. That is why 12 pt and 16 px are the same size, and why a stylesheet that mixes the two is not wrong so much as difficult to reason about — the sizes interleave rather than nest.
The critical difference between em and rem is what happens when they nest. A rem always refers to the root font size, so 1.5 rem is the same size wherever it appears. An em refers to the font size of its own element, so a 1.5 em rule applied inside another 1.5 em element compounds to 2.25 times the base — the reason deeply nested lists and menus drift in size for no visible reason. Ems remain the better choice for anything that should scale with its immediate context, such as padding around text, and the worse choice for a type scale.
One widely copied technique deserves a warning. Setting the root font size to 62.5% so that 1 rem equals a convenient 10 px makes the arithmetic easier and quietly overrides the reader's own default text size, which is exactly the preference rem was introduced to respect. Media-query widths written in em are a related special case: they are evaluated against the browser's default font size rather than the root element's, so they keep working even when the root has been altered.
Quick reference — 1 Pixels (px) is equal to:
| Root em | rem | 0.0625 |
| Em | em | 0.0625 |
| Points | pt | 0.750000019 |
4 units of css px / rem / em, each a fixed multiple of the px. The table spans 16:1, from px (1 px) to em (16 px). Conversion is one multiplication into the base unit and one division out of it, with no lookup table and no approximation.
value_to = value_from × (factor_from ÷ factor_to)1 px = 1 px1 rem = 16 px1 em = 16 px1 pt = 1.33333 pxwhere:
Assumptions: Factors are exact definitions. Full double precision is carried internally and rounding is applied only for display.
Result25 px = 1.5625 rem
A CSS pixel has not corresponded to a physical screen pixel for many years. It is a reference unit sized so that content stays legible at a normal viewing distance, which is why a phone reporting 1,170 hardware pixels across presents itself to CSS as roughly 390 pixels wide at a device ratio of 3.
The rem is what makes a layout respond to the reader rather than the designer. It is relative to the root font size — 16 px by default — so a heading set at 2 rem is 32 px normally, but scales automatically for someone who has raised their browser's default text size for readability. Sizing type in px overrides that preference entirely, which is why the px-to-rem conversion is really an accessibility decision wearing an arithmetic costume.