CSS Unit Converter

What is a CSS Unit Converter?

A CSS unit converter changes a length between px, rem, em and pt using a root font size, and shows all four units at once. Enter a value in any unit, set your base font size (16px by default), and the tool returns the equivalent px, rem, em and pt instantly. As a px to rem converter it is the everyday case: type 24px at a 16px base and you get 1.5rem, 1.5em and 18pt, all in your browser.

What does this tool do?

It bridges the four length units front-end developers use most. Pixels (px) are absolute and predictable; rem and em are relative and scale with the user’s font settings; pt is a print-style point still seen in editors and legacy stylesheets. This converter reads whichever unit you enter and re-expresses that single length in all four at the chosen base, so you can copy the right value straight into your CSS without doing the arithmetic by hand.

How does it work?

The method rests on one idea: rem and em are multiples of the base (root) font size, while pt has a fixed ratio to px. The base defaults to 16px because that is the standard root font size in browsers.

The core formulas are:

px = rem × base; pt = px × 72/96 (base font size default 16px)

Working through the relationships:

1. rem and em to px. Multiply by the base. px = rem × base and px = em × base. In this tool rem and em share the same base, so they produce the same number.
2. px to rem (and em). Divide by the base: rem = px ÷ base. This is the px to rem converter case.
3. px to pt. Points use a fixed CSS ratio where 1pt equals 96/72 px, about 1.3333px. To go from px to pt you invert it: pt = px × 72/96, which is px × 0.75.
4. pt to px. Multiply the other way: px = pt × 96/72, which is pt × 1.3333.

Some terms and units, briefly:

• px (pixel) — an absolute CSS length; the reference unit here.
• rem (root em) — relative to the root font size; 1rem = base px.
• em — relative to font size; in this tool it is computed against the same base as rem.
• pt (point) — a print unit fixed at 96/72 px, independent of the base.

Because pt is tied to px by a constant, changing the base font size rescales px, rem and em together but leaves the px-to-pt ratio untouched.

Examples

Each example follows the exact logic above: rem and em are multiples of the base, and pt = px × 72/96.

Example 1 — 24px at a 16px base.

1. Leave the base at 16px and enter 24 in the px field.
2. rem = 24 ÷ 16 = 1.5rem, and em = 1.5em.
3. pt = 24 × 72/96 = 24 × 0.75 = 18pt.
4. Result: 24px = 1.5rem = 1.5em = 18pt.

Example 2 — 1rem at a 16px base.

1. Enter 1 in the rem field with the base at 16px.
2. px = 1 × 16 = 16px, and em = 1em.
3. pt = 16 × 0.75 = 12pt.
4. Result: 1rem = 16px = 12pt.

Example 3 — 2em at a 16px base.

1. Enter 2 in the em field with the base at 16px.
2. px = 2 × 16 = 32px.
3. pt = 32 × 0.75 = 24pt, and the rem reads 2rem.
4. Result: 2em at base 16 = 32px (and 24pt).

Notice that Example 2 and Example 1 share the same base, so the same 16px that equals 1rem also doubles cleanly to the 32px of Example 3.

px, rem, em and pt reference chart

These rows use the default 16px base and the same rules as the tool, so you can use the chart as a quick lookup. rem and em are identical at a shared base, and pt is px × 0.75.

px	rem	em	pt
8	0.5	0.5	6
12	0.75	0.75	9
16	1	1	12
24	1.5	1.5	18
32	2	2	24
48	3	3	36
64	4	4	48

The 16px row is the anchor: it is exactly 1rem and 12pt, which is why a 16px base lines up so neatly with the others. Every rem value above is simply the px divided by 16, and every pt value is the px times 0.75.

Common uses

CSS unit conversion shows up across front-end and design work. Typical situations include:

• Front-end developers converting a pixel value from a design file into rem so type and spacing scale with the user’s browser font size.
• Accessibility-minded teams switching fixed px sizes to rem so that a reader’s preferred default font size is respected across the layout.
• Designers moving between a print-oriented pt scale in their type tool and the px or rem values needed in CSS.
• Component authors choosing em for padding that should grow with the local font size, then checking the equivalent px at a known base.
• Students learning how relative units relate to the root font size and why 16px is the common default.

Tips and common mistakes

A few details trip people up when converting CSS units:

• rem is relative to the root, em to the parent. This tool computes both against one base, so they match here. On a real page, nested em values compound, while rem always references the root font size.
• Set the base first. Every rem, em and px result scales with the root font size. If your project uses a base other than 16px, change it before reading the outputs.
• pt is not the same as px. 1pt is 96/72 px, about 1.3333px, so 12pt equals 16px, not 12px. Mixing them up shifts every size.
• Avoid fixed px for text where you want scaling. Using rem lets the layout respond to user font settings; hard-coded px does not.
• Watch rounding. Results like 0.9375rem (15px ÷ 16) are exact but long; keep enough decimals so the value round-trips back to the px you started with.

Limitations and notes

This converter handles px, rem, em and pt with a single configurable base font size. It treats rem and em as the same multiple of that base, which is correct only when the element’s font size equals the root; in a real document, em depends on the nearest font-size context, so deeply nested em values can differ from the rem reading here. It does not convert viewport units (vw, vh), percentages, ch, ex or physical units like cm and in, because those need either layout context or a different reference. The pt conversion uses the CSS definition where 96px equals 1 inch and 72pt equals 1 inch, giving the fixed 96/72 ratio. Everything runs locally in plain JavaScript, so the values you enter are never uploaded or stored, and the tool works offline once loaded.

For more developer utilities, pair this with the hex to rgb converter and the color contrast checker for styling work, or the number base converter for raw values, and browse the full Dev & Tech tools collection.