CSS Unit Converter

rem is relative to the root element (html) font size, so it means the same length wherever you use it. em is relative to the parent element font size, so nesting multiplies the effect. Inside a 20px parent, 0.5em is 10px, and 0.5em inside that is 5px. That compounding is why layout dimensions are usually safer in rem.

CSS defines 1in = 96px. From there, 1pt = 1/72in = 96/72 = about 1.3333px, 1pc = 1/6in = 16px, 1cm = 96/2.54 = about 37.795px, 1mm is a tenth of that, and 1Q is 1/40 of a centimetre. These do not necessarily match physical print sizes; on screen the conversion follows this definition.

This converter treats % as a percentage of the parent font size, which is what font-size does. A % width is relative to the parent width, and a unitless line-height percentage is relative to the element own font size. Check which property you are targeting before you rely on the conversion.

With the browser default root font size of 16px, 16px equals 1rem. If you set the root to 10px, 16px becomes 1.6rem. Change the root font size field in this tool and the table updates immediately.

rem is the safer default for layout dimensions such as spacing and widths, because em is relative to the parent font size and compounds when nested. em is the better choice when you want a length to scale with the text it sits next to.

CSS defines 1in = 96px and 1pt = 1/72in, so 1pt = 96/72 = about 1.3333px, and 1px = 0.75pt. These ratios are fixed by the specification and are unrelated to your display resolution.

No. All conversion happens in your browser. Nothing you type is sent to a server.