Pixels to REM Converter

Both are relative units. 1 rem resolves against the root element's font size. For the font-size property, 1 em resolves against the parent's font size; for most other properties, em resolves against the element's own computed font size. Nested em font sizes can compound, while rem values keep the same root reference.

Browsers commonly use a 16 px default font size when the user has not changed it, which makes 1 rem equal 16 px in that default configuration. It is not guaranteed: browser settings and stylesheets can change the root size. Enter the actual root font size for the page you are converting.

Rem-based sizes follow the root font size, so they respond naturally when a user changes the browser's default text size. CSS pixels still scale with normal page zoom, so px does not automatically fail WCAG. Accessibility depends on whether text can reach 200% without lost content or function, not on the unit alone.

Use pt only in print stylesheets (@media print). Points are a physical unit tied to inches (1 pt = 1/72 inch), which matches what printers and typesetting systems expect, so body text at 11 pt or 12 pt prints out at a real-world size you can measure with a ruler. On screens, pt is misleading: the CSS spec pegs 1 pt to 4/3 CSS px regardless of the actual display, so 12 pt renders the same as 16 px no matter how dense the pixels are. For anything that ships to a screen (web, app, dashboard), stick to px or rem and reserve pt for the print bundle.

Percent on font-size resolves against the parent's computed font-size (just like em, not like rem). 100% on the body matches whatever the html element resolved to, which is why html { font-size: 100% } is the recommended baseline: it respects the user's browser setting instead of overriding it with a fixed px value. Percent also shows up in width, height, margin, and padding, where it resolves against the parent's content-box width (height behaves slightly differently and often needs an explicit parent height). For typography, prefer rem for global sizing and em for component-internal scaling; 100% is mostly a way to say to the browser, do not change the inherited size.