CSS Unit Converter
Convert between every CSS length unit, including the relative ones that depend on context. Set your root font size and viewport dimensions and the conversion adjusts — which is what makes rem, em and the viewport units awkward to work out in your head.
How to use this tool
- Enter the value you want to convert and pick its current unit.
- Pick the unit you want the result in.
- If either unit is relative — rem, em, vw, vh, vmin, vmax or % — set the context fields beneath, since those units have no fixed size without one.
- Read the result as you type. The CSS pixel equivalent is shown underneath, which is what the browser works in internally.
- Switch on “Show every equivalent unit” to see the same length in all fourteen units at once.
The formula
CSS anchors every absolute length to the reference pixel: one inch is defined as exactly 96px, whatever the physical display actually does. Relative units need a context instead — a rem depends on the root font size, a vh on the viewport height — so the conversion pivots through the CSS pixel once that context is known.
pixels = value × px_per_unit(context)
result = pixels ÷ px_per_target(context)- px_per_unit
- CSS pixels one input unit represents
- context
- Root font size, parent font size and viewport dimensions
- 1in
- Exactly 96px by definition, not by measurement
The CSS pixel is a reference unit, not a device pixel. On a high-density display one CSS pixel may cover four or more physical pixels; the browser handles that scaling, which is why 16px looks the same size on a phone and a desktop monitor.
Worked examples
Pixels to rem at the default root size
- Given
- 24px with a 16px root font size
- Result
- 1.5rem
24 ÷ 16 = 1.5. This is the everyday conversion when moving a design from pixel-based mockups to a rem-based stylesheet.
The same value with a 10px root
- Given
- 24px with a 10px root font size
- Result
- 2.4rem
Some teams set html { font-size: 62.5% } to make the root 10px, so that rem values read as tenths of a pixel value. The same 24px is now 2.4rem rather than 1.5rem.
Points to pixels for print stylesheets
- Given
- 12pt
- Result
- 16px
CSS defines 1pt as 1/72 inch and 1in as 96px, so 1pt is exactly 96/72 = 4/3 px. Twelve points is therefore exactly 16 pixels.
Frequently asked questions
Both scale with a font size, but different ones. A rem always refers to the root element’s font size, so it is consistent across the whole document. An em refers to the font size of the element it is used on, which means nested elements compound: an em inside an em inside an em multiplies three times over.
No. The CSS pixel is a reference unit defined as 1/96 of an inch. On a high-density display one CSS pixel may be drawn using four or more physical pixels. That indirection is what keeps 16px text the same apparent size on a phone and a desktop monitor.
Because the specification fixes the relationship rather than measuring it. A real display might be 96, 163 or 460 pixels per inch. CSS needs a stable definition so that stylesheets behave predictably, so it defines the reference pixel and lets the browser handle the mapping to real hardware.
Viewport units always refer to the browser window, while a percentage refers to the containing element. Use vh or vw for full-screen sections and hero areas; use percentages when you want something sized relative to its parent. Note that vh on mobile browsers can shift as the address bar hides and reappears.
A quarter-millimetre. It was added for print and small-format layouts where millimetre precision is too coarse, and it is exactly what its name says: four Q make one millimetre. It is rarely used on screen but is well supported.
Percent is generally safer. Setting html { font-size: 100% } respects whatever text size the reader has chosen in their browser settings, while a fixed pixel value overrides it. Since rem scales from the root, that choice affects the entire document.
Related tools
Calculate a display’s pixel density, dot pitch and quality class from its resolution and size.
Print Resolution CalculatorWork out the pixel dimensions, print size or DPI you need for sharp printed output.
Advanced Colour ConverterConvert between HEX, RGB, HSL, HSV, CMYK, LAB, LCH, OKLAB, OKLCH and XYZ with a live preview.