loot.tools

PX to REM Converter

Convert between the CSS length units you actually use: px, rem, em, pt, and %. Type a value, pick its unit, and read the equivalents instantly. rem, em, and % are measured against an adjustable root font size (16px is the browser default), and pt uses the CSS reference of 96px per inch (so 16px = 12pt). A reference table lists the rem value for every common pixel size at your chosen root.
Design

Convert between px, rem, em, pt, and % for CSS. Type a value, pick its unit, and read off the rest. rem, em, and % are measured against the root font size below (16px is the browser default).

rem - Root em
1rem
em - Em
1em
pt - Points
12pt
% - Percent
100%
Common px to rem (root 16px)
pxrem
10px0.625rem
12px0.75rem
14px0.875rem
16px1rem
18px1.125rem
20px1.25rem
24px1.5rem
28px1.75rem
32px2rem
40px2.5rem
48px3rem
64px4rem

Why convert px to rem

Sizing in rem instead of px lets a whole layout scale when someone changes their browser's font size, which is better for accessibility. rem is relative to the root font size (the <html> element), so 1rem is 16px by default. Designers usually work in px but ship in rem, so a quick converter saves the mental math on every value.

How to use it

Enter a number, choose the unit it's in, and the other units update as you type. Change the root font size if your project sets <html> to something other than 16px, and the rem, em, and % results follow. Each result has a copy button. The reference table at the bottom lists rem values for the pixel sizes you reach for most.

How the units relate

  • rem and em are both measured here against the root font size, so at 16px root, 24px is 1.5rem
  • pt is a print unit: 1pt is 96/72 px, so 16px is 12pt and 12px is 9pt
  • % works like rem scaled by 100, so 1rem is 100%
  • Everything runs in your browser, nothing is sent anywhere