CSS Unit Converter

Q: How do I convert any CSS unit to every other unit?

Each unit is converted through pixels: relative units are resolved against the font size you set, absolute units use the fixed ratios 1in = 96px and 1pt = 1/72in. The tool does this for you and lets you change the reference size, because that reference is what makes the answer different from one project to the next.

Q: What root font size should I use?

Browsers default to 16px, so 16 is the right starting point unless your stylesheet sets a different size on the html element. If your CSS sets `html { font-size: 62.5% }` — a common trick to make 1rem equal 10px — set the root size to 10 here instead.

Q: Should I use px or a relative unit?

Use relative units (rem, em) for anything that should scale with the reader's font-size preference: type, spacing, and container widths. Pixels are fine for things that genuinely should not scale, such as hairline borders and some shadow offsets. The accessibility rule of thumb is that a user who sets a larger default font size in their browser should see your layout grow with it.

Q: Is my data sent anywhere?

No. The conversion is arithmetic done in your browser — nothing is uploaded, and the page works offline once loaded.

Q: Which CSS unit should I actually use?

rem for type, spacing and container widths, because it scales with the reader's font-size preference and does not compound through nesting. em where a value should track the element it belongs to, like padding inside a button. px for things that genuinely should not scale, such as hairline borders. pt and inches only inside a print stylesheet.

Q: Why do em and rem give the same number here?

Because this page resolves both against the single font size you enter. In a real document they differ: em is measured against the parent element and rem against the root, so they only agree when the parent is at the root size. The moment an ancestor sets its own font size, em values shift and rem values do not.

Q: Are px, pt and inches related by a fixed ratio?

Yes. CSS defines one inch as exactly 96 pixels and one point as one seventy-second of an inch, so 1pt is always 1.3333px. Those three convert between each other without any font size involved — which is why their row in the table never changes when you adjust the base.

Convert between px, em, rem, points, percent and inches at once — enter one value and see every CSS unit.

Value and unit

Equivalent in every unit

Unit	Value

Root / parent font size

Browsers default to 16px. Use 10 if your CSS sets html { font-size: 62.5% }.

About this conversion

The same value at other root sizes

Root size	Result

What It Does

This is the whole family on one page: type a value in any CSS unit and see it in all six at once. CSS units split into two groups — px, pt and inches are absolute and fixed relative to each other, while em, rem and percent depend on a font size. The converter resolves everything through pixels using the root or parent size you set, and lists the caveats that apply to your particular value, such as em compounding through nesting or rem and percent measuring against different elements.

When to Use It

You are converting a design handed over in any CSS unit into a stylesheet that uses every other unit for accessibility.
You inherited a codebase that mixes units and you need the unit equivalent of an existing unit value.
You want to check what a unit value becomes when the user changes their browser's default font size.
You are writing a design-token scale and need the same step expressed in both units.

Worked Examples

16

The browser default: 16px is 1rem, 1em, 100%, 12pt and one sixth of an inch.

24

A heading step: 24px is 1.5rem, 150% and 18pt.

1

Change the unit to inches and 1in shows as 96px and 72pt — the two definitions the absolute units are built from.

Features

Instant two-way conversion

Configurable root/parent font size

Full conversion table for common root sizes

Fractional-pixel rounding warning

Copy the value or the whole table

Works offline in your browser

No uploads or tracking

How to Use

1. Type a value and pick the unit you are starting from — or just type "1.5rem" and the unit is detected. 2. Set the root or parent font size if it is not the 16px default. 3. Read every equivalent at once, and copy the one you need.

Common Mistakes

Assuming the conversion is fixed. relative units depend on a font size; absolute units do not — the same unit value converts differently depending on that size.
Confusing em with rem. `em` is relative to the *parent* element's font size and therefore compounds when nested; `rem` is always relative to the root element and does not.
Setting a px font size on the root element. That overrides the user's browser font-size preference, which defeats the accessibility reason for using relative units at all.
Rounding too early. Keep the fraction (1.375rem, not 1.4rem) — the browser resolves sub-pixel values fine and the rounding error compounds across a scale.

Frequently Asked Questions

How do I convert any CSS unit to every other unit?

What root font size should I use?

Should I use px or a relative unit?

Is my data sent anywhere?

Which CSS unit should I actually use?

Why do em and rem give the same number here?

Are px, pt and inches related by a fixed ratio?

The conversion runs entirely in your browser. Nothing is uploaded and nothing is stored.