CSS Unit Converter
Convert between px, rem, em, pt, and % — with a configurable base font size
em the same as rem — relative to the base font size above — for simplicity. In real CSS, em is actually relative to the parent element's computed font size, which can compound across nested elements; rem always refers to the root (<html>) element's font size regardless of nesting, which is exactly why it's usually the safer default for sizing.About this tool
The ToolNinja CSS Unit Converter converts a value instantly between the five CSS length units developers actually use day to day — px, rem, em, pt, and % — against a configurable base font size, so the conversion matches whatever root font size your project actually uses, not just the browser default of 16px. The constant back-and-forth between px (what a design mockup usually specifies) and rem (what a well-built stylesheet actually uses for accessibility and scalability) is one of the most repetitive small calculations in frontend work. This tool treats em the same as rem for simplicity — both relative to the single base value you set — since computing em's true behavior (relative to each element's own parent, which can compound through nested elements) requires knowing the actual DOM context a value will be used in, which a standalone converter has no way to know. Everything computes instantly in your browser — no page reload, no server round-trip.
When to use it
- →Converting a designer's px-based Figma spec into rem values for a stylesheet that uses rem for scalability
- →Checking what a given rem or em value resolves to in pixels for a specific base font size
- →Converting a legacy pt-based print stylesheet value into a modern screen-appropriate unit
- →Quickly sanity-checking a % value's pixel equivalent relative to a known base size
Tips
- ◆The base font size defaults to 16px — the universal browser default — but change it if your project sets a different root font-size (a common pattern for globally scaling an entire design system's type).
- ◆rem is almost always the safer choice over em for component sizing, specifically because it doesn't compound through nested elements the way em does — a rem value means the same pixel size everywhere in the page, regardless of nesting depth.
- ◆pt (point) conversion assumes the standard 96px-per-inch, 72pt-per-inch CSS reference — the same fixed ratio (4:3) every browser uses, so pt-to-px is always exact, unlike em's context-dependent behavior.
Frequently asked questions
Why does 1rem equal 16px by default?
Because every major browser's default root font-size is 16px, and rem ("root em") is defined as relative to that root element's font-size specifically — not the default in some arbitrary sense, but because that's literally what the unit is defined to measure. Changing the root font-size (on the <html> element) changes what 1rem equals across the entire page at once.
What's the actual difference between rem and em if this tool treats them the same?
In real CSS, em is relative to the computed font-size of the element it's used on (or its parent, for font-size itself) — so the same em value can resolve to different pixel sizes in different parts of a page, depending on nesting. rem is always relative to the single root element, regardless of where it's used. This tool simplifies em to match rem's single-base-value behavior because a standalone converter has no actual DOM context to compute true nested em values against.
When should I use % instead of a fixed unit?
% is relative to a parent property's value (which one, specifically, depends on the CSS property — width's percentage is relative to the parent's width, font-size's percentage is relative to the parent's font-size, and so on), making it the right choice for genuinely fluid, parent-relative sizing — but the wrong choice when you want a value to stay consistent regardless of its container, which is where rem or a fixed px value is more predictable.