CSS Unit Converter

A CSS Unit Converter translates a length between the units CSS uses for sizing type and layout: px, rem, em, pt, and %. It exists because modern responsive design leans on relative units - rem and em scale with the user’s font-size settings and zoom - while design mockups and older stylesheets are usually expressed in fixed pixels. This tool takes a value like 24px and shows it as 1.5rem, 1.5em, 18pt, and 150% at once, and works in every direction from a single field.

The conversions all hinge on one number: the root (base) font size, which defaults to 16px because that is the browser default for the html element. One rem always equals that base font size, so at 16px the value 16px is 1rem, 24px is 1.5rem, and 8px is 0.5rem. Points are tied to the CSS reference pixel - 1 inch is 96px and 72pt - so 1pt equals 96/72, about 1.333px. Percent is treated as a share of the base font size, so 100% equals the base and 50% equals half of it.

Every conversion takes two steps. The tool first turns your input into pixels by multiplying it by the number of pixels in one input unit, then divides that pixel value by the number of pixels in one target unit. At an 18px base, 27px becomes 27 ÷ 18 = 1.5rem, and at any base 12pt becomes 12 × 96 ÷ 72 = 16px. Results are rounded to at most four decimal places, so 15px at a 16px base reads 0.9375rem. Viewport units such as vw and vh are not part of the converter, because they depend on the window size rather than a font size. A base font size of zero or less falls back to 16px.

Everything runs in your browser as you type, so there is no upload and no waiting on a server. Change the base font size to model a component that sets its own font-size, read the results in every unit, and copy the one you need. The built-in px-to-rem table gives you a ready reference for the sizes that come up most in a type scale.