Pixels to REM Converter

Both are relative units, but they anchor to different parents. 1 rem always resolves against the root font-size set on the html element, so it stays the same anywhere in the document. 1 em resolves against the font-size of the element's own parent, so a 1.5 em font-size means 150% of whatever the parent uses. That makes rem predictable for global sizing (typography scales, spacing, breakpoints) and em handy for component-local rhythm, where padding or line-height should follow the local font-size. If you nest two em-sized elements, the inner one compounds: 1.5 em inside 1.5 em is effectively 2.25 times the grandparent. Rem never compounds.

Every major browser ships with html { font-size: 16px } unless the user overrides it in settings. That number traces back to the original CSS draft, which mapped 1 em to the user's preferred body text size, and 16 px happened to be the comfortable reading size on the CRT monitors of the late 90s. The convention stuck, so today 1 rem equals 16 px by default and almost every design system (Tailwind, Bootstrap, Material) builds its scale on that assumption. If you set html { font-size: 10px } to make 1 rem equal 10 px, you break the user's accessibility setting; better to leave the root alone and divide by 16 in your head, or use this calculator.

When users bump up their browser's default font-size for readability (Settings > Appearance > Font size, or a browser zoom that targets text), the html element's font-size grows. Anything sized in rem grows with it, so a navigation bar built with rem padding, rem font-sizes, and rem icons stays visually balanced and legible. Pixel-sized layouts ignore that setting and stay frozen at the designer's original numbers, which forces users to use page zoom (scaling everything including images and layout grids) instead of just enlarging text. The WCAG 2.1 success criterion 1.4.4 explicitly requires text to be resizable up to 200% without loss of content or function, and rem-based typography passes it almost for free.

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.