Practical guide · dimensions explained
PX to REM, EM and PT: choose the right reference
Work through CSS font and spacing conversions without confusing layout pixels with an image’s print resolution.
Reviewed September 28, 2026 · Worked examples calculated for this guide
Start with the element and property
A design instruction such as “24 pixels of spacing” is incomplete if the receiving style uses a font-relative unit. Find the computed root font size for rem. For em, decide whether you are setting font-size or another length such as padding. The former uses the parent’s font as its reference; padding uses the element’s own computed font. Enter that reference into the converter.
A card with two font references
Suppose a page has an 18 px root font and a card has a 20 px computed font. A 30 px card padding is 30/18 = 1.666667 rem, or 30/20 = 1.5 em. Those values match only for this configuration. If the card font grows to 24 px while the root stays at 18 px, 1.5 em padding becomes 36 px; the rem padding stays at 30 px.
Keep points separate from image density
CSS points have a fixed relationship to CSS pixels: 72 pt equals 96 px. A 24 px CSS length therefore equals 18 pt. Setting a photo’s metadata to 300 PPI does not change that conversion. Photo PPI describes how many image pixels occupy an inch of physical output; CSS units describe layout relationships.
Save the references with the answer
Share a conversion together with the root font, em reference and viewport dimensions. A bare result such as 1.5 rem can be interpreted differently in another stylesheet. Use browser developer tools to check computed styles, then test the layout with enlarged text and different viewport widths. The calculator supplies arithmetic, not a substitute for that visual and accessibility review.
Reference notes
References checked September 28, 2026. Calculations and worked examples are our own.