CSS unit converter (px to rem, em, pt)

How to convert px to rem

Divide the pixels by the root font size. At the usual browser default of 16 px, 24 px = 24 ÷ 16 = 1.5 rem. If a stylesheet sets html { font-size: 62.5% }, the root is 10 px and 24 px is 2.4 rem. Multiply by the root size to go back to px.

Common px to rem values

At a 16 px root:

• 10 px = 0.625 rem
• 12 px = 0.75 rem
• 14 px = 0.875 rem
• 16 px = 1 rem
• 18 px = 1.125 rem
• 20 px = 1.25 rem
• 32 px = 2 rem
• 48 px = 3 rem

The 16 px root is a common browser default, not a rule of the CSS specification, and readers can change their browser's default font size. A rem value follows that preference when the page's root font-size rule respects it; a fixed root size can override it. A fixed px value does not follow that preference.

em vs rem

rem always refers to the root element's font size. em refers to the parent's font size when used on font-size, and to the element's own font size on other properties such as padding.

A percentage font size works like em: 150% of a 20 px parent is 30 px. Percentages on other properties use other bases; a percentage width is a share of the containing block's width.

em compounds when nested, because each level inherits the last. A list at 1.2em inside another list at 1.2em has text 1.44 times the shared starting font size, while 1.2rem stays 19.2 px at a 16 px root however deep it sits.

How to convert px to pt, inches and mm

CSS fixes its absolute units to each other: 1 in = 96 px = 72 pt = 6 pc = 2.54 cm, and 1 Q is a quarter millimeter (W3C CSS Values and Units). From those:

• px to pt: multiply by 0.75, so 16 px = 12 pt.
• pt to px: multiply by 4/3, so 12 pt = 16 px and 11 pt ≈ 14.67 px.
• pc to pt: 1 pc = 12 pt = 16 px.
• mm to px: multiply by 96/25.4 ≈ 3.7795, so 10 mm ≈ 37.8 px.

A CSS inch is not a ruler inch on screen

The CSS reference pixel has a visual angle of about 0.0213°. Implementations can anchor absolute units to physical measurements or to pixels; a CSS inch therefore need not match a ruler inch on a screen.

Device pixel mapping and viewing distance affect the correspondence, so a 96 px box can measure less than an inch on a phone. The PPI calculator gives a display's real pixel density from its resolution and diagonal, which is what decides how large a CSS inch looks. Physical-unit anchoring and correctly scaled actual-size printing can match a ruler; calibration and output scaling still matter.

Pixels for print at 300 DPI

Print and image work count physical pixels, so use the output resolution instead of 96. At 300 DPI, 1 inch is 300 pixels and 10 mm is 10 ÷ 25.4 × 300 ≈ 118.11 pixels. The millimeters to inches converter handles the physical side on its own, and the length converter covers the other metric and imperial units. Browser CSS still uses 96 px per inch, whatever the screen.

CSS unit conversion examples

Each row states the context that changes the answer: the root size for rem, the parent size for em and %, and the pixels per inch for physical units.

px or rem for font sizes?

Use rem when text should follow the reader's default font-size setting, and make sure the root rule respects that preference. Browser zoom enlarges px and rem alike. A font-size preference can also affect rem, em and percentage sizes when their root or parent context preserves it; a fixed font size can override that context.

WCAG 2.1 success criterion 1.4.4 asks that text can be resized to 200% without loss of content or functionality. Browser zoom can meet it with either unit; rem also follows the font-size preference when the root rule respects it.

Percent, DPI and negative values

• The % unit means percent of the parent font size, as in a font-size declaration.
• A pixels-per-inch value other than 96 makes px count physical pixels at that density, as for print.
• Negative values convert with their sign, as for a negative margin.