This px to rem converter turns any pixel value into the equivalent rem (and em) unit instantly, with a live bidirectional calculator: type in pixels and see rem, or type in rem and see pixels. Change the base font size and the reference table below updates in real time. The default base is 16px — the browser standard — but you can enter 10px, 14px, or any custom root value your design system uses. Click any cell in the reference grid to copy its value. A one-click CSS variables export generates a ready-to-paste :root block with a standard typography scale.
Last updated: March 2026rem is always relative to the root element's font-size, making it predictable across your document. em is relative to the parent element's font-size, so nested em values compound. Use rem for typography scales, spacing, and breakpoints; use em for component-local sizing (padding, gap) that should scale with the component's own text.
rem = pixels / root-font-size. By default browsers render the root element (html) at 16px, so 16px equals 1rem, 24px equals 1.5rem, and 32px equals 2rem. If a design system sets html { font-size: 10px }, the math becomes simpler — 10px equals 1rem and each 10px step is 1rem — but that approach can break user accessibility settings, so most teams stick with the 16px default and do conversion in their build tooling or with a tool like this.html) font-size — consistent across the entire document. em is relative to the current element's parent font-size, so nested em values compound: an em inside an em-sized container gets multiplied. Use rem for predictable spacing, typography scales, and media query breakpoints. Use em for component-local sizing where you want a child element (an icon, padding, border-radius) to scale naturally with its parent's font-size.postcss-pxtorem, shipped CSS respects user zoom and accessibility settings.html { font-size: 62.5% } sets rem to 10px while still respecting user zoom.