CSS Unit Converter

About CSS Unit Converter

Enter a value in px, rem, em, %, pt, vw or vh and the tool converts it to the unit you pick. You set the reference values yourself: the root (html) font size for rem, the parent font size for em, a container size for %, and the viewport width and height for vw and vh. Defaults are 16px, 16px and 100px, and the viewport starts at your current window size. pt is fixed at 1pt = 4/3px. A number with no unit is treated as px.

Each conversion is a single multiplication, but the reference you choose changes everything. Percentages in particular refer to different things depending on the property, and px, despite the name, is not a physical screen pixel.

A CSS pixel is an angle, not a screen dot

The CSS Values and Units specification defines px through a reference pixel: the visual angle of one pixel on a 96 dpi device viewed at arm's length. With a nominal arm's length of 28 inches, that is about 0.0213 degrees. So a CSS pixel behaves more like an angle than a length. On a TV viewed from across the room, 1px is physically larger; on a phone held close, it is smaller, and that is what the spec intends.

Browsers implement this through the device pixel ratio. On a phone with a ratio of 3, one CSS pixel is drawn with a 3×3 block of hardware pixels. Because the spec fixes 1in = 96px and 1in = 2.54cm, writing 1cm in CSS will usually not measure exactly one centimeter if you hold a ruler to the screen.

rem vs em: what gets multiplied

rem is relative to the root element's font-size. em is relative to the element's own font-size, except inside the font-size property itself, where it refers to the parent's. The tool's parent font size field covers that common font-size case.

em compounds when nested. A list with font-size: 1.2em nested three levels deep ends up at 16 × 1.2 × 1.2 × 1.2 ≈ 27.6px. rem always looks at the root, so it does not compound. On the other hand, em is exactly what you want for padding inside a button: when the button's text grows, the padding grows with it.

The strongest argument for rem is accessibility. If a reader raises the browser's default font size from 16px to 20px, text sized in rem scales with it and text fixed in px does not. The html { font-size: 62.5% } trick, which makes 1rem equal 10px, still respects that setting because it is a percentage of the user's default.

What a percentage is a percentage of

The tool computes % against a single container size. In real CSS the reference depends on the property, so decide which number belongs in that field:

• width, left, right: width of the containing block
• height: height of the containing block (behaves like auto if that height is not definite)
• padding and margin: the containing block's width, even for top and bottom
• font-size: the parent's font size (so 150% equals 1.5em)
• line-height: the element's own font size
• transform: translate(): the element's own box

Points and print units

The spec sets 1pt = 1/72in and 1pc = 1/6in, and 1in = 96px, so 1pt = 4/3px and 12pt = 16px. That is why a 12-point body text in a word processor matches the web's default 16px. Pick pt as the unit (or type 12pt) and the tool converts it straight to px or rem.

Worked examples

How to use it

1. Set root font size, parent font size, container size and viewport width/height to your real values.
2. Enter a value with its unit (no unit means px).
3. Pick the target unit, then read or copy the result, shown to four decimal places.

Frequently asked questions