CSS Unit Converter — Convert CSS Units Between px, rem, em, and pt
Convert CSS length units between px, rem, em, pt, and %. Set a custom root font size, runs entirely in your browser. No uploads, no limits.
CSS Unit Converter
Convert CSS units between px, rem, em, and pt. Uses the standard 16px = 1rem base. Works entirely in your browser.
CSS units are a small set of names that map to a confusingly large set of meanings. The spec defines about 30 length units; in practice, web developers use a handful: px for absolute sizes, rem and em for typography, % for flexible layouts, and vw/vh for viewport-relative sizing. The first three are the ones this tool covers, and the conversion between them is a multiplication by a single constant: the root font size. The reason a tool exists for what is effectively value * 16 is that the root font size is configurable, and getting the wrong constant produces values that look right in code review and ship broken to users.
The non-obvious thing about unit conversion is that px in CSS is not the same as px on a hardware display. CSS defines 1px as 1/96 of an inch, always — so 96 CSS pixels is exactly one inch, regardless of the device’s physical pixel density. On a Retina display, the browser maps 1 CSS pixel to 4 hardware pixels (2x2) for sharp rendering. On a 4K display, the mapping is 9 hardware pixels per CSS pixel (3x3). The unit converter works entirely in CSS pixels, so the output is correct in code regardless of the device — what changes is the rendered size, not the value. For print stylesheets, the same 96 CSS-pixel-per-inch rule applies, so 1in = 96px and 1pt = 1.333px (the printer-point definition).
For a final hand-off: if the goal is picking the right unit for a new stylesheet, use rem for typography and spacing (so the design scales with user preferences), px for borders and shadows (so they do not scale), and % or vw for layout (so the design adapts to the viewport). If the goal is converting a legacy stylesheet from px to rem, the root font size is the only number you need to set — typically 16px for an unchanged browser default, or whatever the design system has standardized on. The converter here gives you the exact rem value for any px input at any root size.
How to use
Enter a value and source unit
Type a number and pick the source unit (px, rem, em, pt, %). The custom root font size field is editable; the default 16px matches the browser default. Most calculators assume 16px unless told otherwise.
Read the converted values
The output panel shows the value in every other supported unit. The calculations update as you type, so a single value produces five outputs at once.
Copy the line you need
Click any row in the output panel to copy that line to the clipboard, formatted as a ready-to-paste CSS declaration (`font-size: 1.25rem;`). Useful for hand-editing a stylesheet.
Frequently asked
Why is the px value different from what the browser shows?
Browsers default to a 16px root font size, but users can change it (the browser zoom, the OS display settings, accessibility preferences). The converter uses a configurable root font size — set it to your actual root font size, not the default 16px, for accurate results.
What is the difference between rem and em?
rem is relative to the root font size (`html { font-size: 16px; }` — 1rem = 16px). em is relative to the parent element's font size, which can change at every nesting level. 1em inside a `font-size: 20px` parent is 20px, not 16px.
Does this convert between absolute and relative units?
Yes — px, pt, and in (inches) are absolute units. rem, em, and % are relative. The conversion is exact for absolute-to-absolute (1in = 96px = 72pt, by CSS spec) and requires the root font size for relative-to-absolute (1rem = root font size in px).
Why are % values approximate?
The meaning of 50% depends on the property — for `width`, 50% is half the parent's width; for `font-size`, 50% is half the parent's font size; for `margin`, 50% is half the containing block's width. The converter assumes font-size percentage unless you pick a different property.
Should I use px or rem in modern CSS?
rem is the modern recommendation for typography and spacing because it respects user font-size preferences. px is fine for borders, shadows, and other non-text sizes. The choice is a project convention, not a correctness issue.
Limitations
- em depends on the parentem is relative to the parent's font size, which can be different at every level. The converter assumes a single root font size — for nested em values, walk up the DOM and apply the conversion at each level.
- vw and vh are not convertedViewport units (vw, vh, vmin, vmax) are relative to the viewport size, not the root font size. They cannot be converted with this tool. Use a different calculator for viewport-relative layouts.
- No property-specific %The % conversion assumes the value applies to font-size. For width, padding, or margin percentages, the result is different. The tool labels the % row with its assumption so the output is clearly scoped.
Platform notes
- macOS
- Safari, Chrome, and Firefox on macOS all default to 16px root font size. The converter matches that. For testing user-zoomed output, set the root font size in the input to the user's actual zoom level and re-run.
- Windows
- Edge and Chrome on Windows default to 16px. Internet Explorer 11 used a different default for some properties; if you are maintaining legacy code, test in IE11's rendering mode and set the root font size to match.
- Linux
- Linux browser defaults match macOS and Windows at 16px. For high-DPI displays, the actual rendered pixel size is hardware-scaled, but the CSS px value is unchanged — the converter works on CSS values, not rendered pixels.
- Web
- Runs entirely client-side. Works offline once the page has loaded. The root font size is read from the input field, not from your browser — set it to your stylesheet's actual value for accurate conversions.