Pixel Unit Converter

CSS uses several units for sizing elements and text. Conversions assume 96 DPI (standard screen resolution).

Absolute units (at 96 DPI):

• 1 inch = 96 px = 72 pt = 2.54 cm = 25.4 mm
• 1 px = 0.75 pt = 0.0104 in = 0.0265 cm
• 1 pt = 1.333 px = 0.01389 in = 0.03528 cm
• 1 cm = 37.795 px
• 1 mm = 3.7795 px

Relative units (depend on base font size):

• 1 em = size of the parent element’s font (default 16px)
• 1 rem = size of the root (html) element’s font (default 16px)
• At default 16px base: 1 em = 1 rem = 16 px

Common font sizes:

Why rem beats px for font sizes, and it is not a style preference. A visitor who raises their browser’s default text size from 16 px to 20 px, which people with low vision genuinely do, scales every rem value on the page along with it. A px value ignores that setting completely. So font-size: 14px is a decision to override an accessibility preference the reader deliberately set, while font-size: 0.875rem respects it. Use rem for anything text-sized and px for hairlines, borders and shadows, where a fixed 1 px really is what you want.

Where em still earns its place, and where it bites. em is relative to the parent element’s font size, so it is the right unit for padding and margins that should grow with their own text. The trap is nesting. A list item at 1.2em inside another at 1.2em is 1.44 times the root, not 1.2, and three levels down you are at 1.73 with no single line of CSS to blame. That compounding is exactly what rem was introduced to stop, which is why the calculator above asks for the root and parent font sizes separately rather than pretending they are the same number.