px, rem, em, and pt in CSS: A Practical Guide
Understand absolute versus relative CSS units, why rem aids accessibility, how em compounds when nested, and where pt still belongs.
Absolute versus relative units
CSS length units split into absolute and relative families, and the difference drives every conversion here. px and pt are effectively absolute for the web: CSS pins 1 inch to 96px and defines 1pt as 1/72 of an inch, so px and pt always trade at a fixed 96/72 ratio no matter the page. rem and em are relative units whose pixel value depends on a font size, which is why this tool asks for a root font size before it can place rem and em on the same scale as px and pt. Set that base correctly and every unit in the grid lines up.
Why rem helps accessibility
When a user increases their browser's default font size or zooms, anything sized in px stays put while anything in rem grows in proportion. Because rem multiplies the root font size, a heading set to 2rem becomes larger automatically as the root grows, keeping the layout readable rather than cramped. That is the core reason many design systems express typography, spacing, and breakpoints in rem. Converting a px comp to rem at the intended root, usually 16px, is often the first step in making a fixed mockup respond to user preferences.
How em compounds when nested
em looks like rem in a single element but behaves differently once elements nest, because it references the font size of its own element rather than the root. If a container sets font-size to 1.25em and a child inside it also uses em, the child's reference size has already grown, so values multiply down the tree. This converter deliberately measures em against the base you supply, matching the simple, unnested case. For nested components, treat the tool's em output as a starting estimate and confirm the rendered size in your browser's dev tools.
Where pt still belongs
pt comes from typography and print, where a point is a fixed physical fraction of an inch. On screen its meaning is fixed by the CSS 96px-per-inch rule, so 12pt renders as 16px and 24px maps back to 18pt. You will mostly meet pt in print stylesheets, PDFs, and design software imported from a print workflow. Converting those pt values to px or rem lets you rebuild a print-oriented design for the web while keeping the on-screen sizes true to the original.