Pixel Unit Converter

CSS uses four absolute-length units for typography: px (CSS pixels), rem (root ems), em (parent ems), and pt (PostScript points). All four ultimately reference the CSS inch, defined by the W3C as exactly 96 CSS pixels — making 1 pt = 96/72 px ≈ 1.333 px and 1 rem = the root element's font size in px (browser default: 16 px).

The formula

CSS absolute length anchor (W3C CSS Values Level 4):
  1 in = 96 CSS px = 72 pt

Derived:
  1 pt  = 96/72 px = 4/3 px ≈ 1.3333 px
  1 px  = 72/96 pt = 3/4 pt = 0.75 pt

Relative units (depend on base font size):
  1 rem = base_font_size_px        (root element font size)
  1 em  = parent_element_font_size (compounds in nested elements)

At browser default (base = 16 px):
  1 rem = 16 px
  16 px = 1 rem
  12 px = 0.75 rem
  14 px = 0.875 rem
  18 px = 1.125 rem
  24 px = 1.5 rem

Practical examples

Example 1 — Converting a design spec from px to rem. Design file says 24px font size. Browser base is 16px. In CSS: 24 / 16 = 1.5 rem. This value scales with the user's browser font size preference.

Example 2 — Converting print point sizes to CSS px. Microsoft Word uses 12pt body text. In CSS: 12 × (4/3) = 16 px — exactly the browser default body text size. This is not a coincidence: CSS was designed to match print conventions.

Example 3 — Design system with non-standard base. A design system sets html { font-size: 10px; } to make math easier. Then 1 rem = 10 px, 1.4 rem = 14 px, 2.4 rem = 24 px. Update this converter's base to 10 px to work in that system.

Common mistakes

• Using em instead of rem for font sizes. em inherits from the parent element, so it compounds in nested markup. A paragraph inside a div both set to font-size: 1.2em results in 1.2 × 1.2 = 1.44× the root size. rem avoids this by always referencing the root.
• Confusing CSS pixels with device pixels. On a 2× retina screen, 1 CSS px maps to 2 physical display pixels. CSS px is a logical unit. Physical pixel density (DPI/PPI) is separate.
• Treating pt as a screen unit. pt is a print unit (1/72 inch). In CSS, using pt for screen layout works but is unconventional and confusing. Use px or rem for screen layouts; pt for @media print stylesheets.

International and regional variations

Quick reference (base font size = 16 px)