Loading...
Convert between pixels, rem, em, and inches instantly
PX (pixels) are absolute screen units. REM is relative to the root font size, EM is relative to the parent element's font size, and inches map to physical measurements via DPI. Using relative units like REM improves accessibility and responsive design.
The conversions use simple formulas based on your configured values:
rem = px / rootFontSize
em = px / contextFontSize
inches = px / dpi
Example: 24px / 16 = 1.5rem
Example: 96px / 96 = 1inClick any value to copy. (Root: 16px, Context: 16px, DPI: 96)
| px | rem | em | inches |
|---|---|---|---|
Formula
rem = px ÷ rootFontSize | em = px ÷ contextFontSize | inches = px ÷ DPIpx = Absolute pixel value — device-independent pixels on screen
rootFontSize = Base font size of the HTML element (browser default: 16px)
contextFontSize = Font size of the parent element used for em calculations
DPI = Dots per inch — screen standard is 96 DPI; print is typically 300 DPI
Worked Example
Convert 24px to rem, em, and inches (rootFontSize = 16px, contextFontSize = 16px, DPI = 96)
Did you know? The W3C chose 96 DPI as the CSS reference pixel because it matches the pixel density of a 21-inch monitor viewed at arm's length — not because of any physical screen measurement. This is why CSS pixels and device pixels often differ on high-DPI screens.
Sources
Convert text to ASCII codes and back. Supports decimal, hex, binary, and octal formats.
Convert width/height to aspect ratios, scale dimensions, and generate responsive embed CSS for any layout.
Calculate required internet bandwidth based on devices and activities in your household.
Encode and decode Base64 strings. Convert text for data URIs, APIs, and safe data transmission.
Create CSS border-radius with visual controls for each corner. Generate circles, pills, and custom shapes.
Create CSS box shadows with multiple layers, live preview, and copy-ready code.