Skip to content
ToolBoxGenie

CSS Unit Converter

Converters · Added 18 August 2026

Convert any CSS length into every other one at once. The root and element font sizes are inputs rather than assumptions, so the answer is right for a design system with a 10px root, for a nested component with its own font size, and for a visitor who has enlarged their browser's default text.

Converts as you type — negative values and decimals are fine.

A CSS reference pixel — about 1/96 inch, independent of the device's hardware pixel density.

Context
px

html { font-size: … }. Browsers default to 16px.

px

What em and % resolve against.

px

Only affects vw.

px

Only affects vh.

Equivalent values

24px in rem

1.5rem

At a 16px root and a 16px element font size

UnitValueDepends onCopy
Pixels (px)24pxNothing — fixed ratio
Root em (rem)1.5remFont size
Em (em)1.5emFont size
Points (pt)18ptNothing — fixed ratio
Percent (%)150%Font size
Inches (in)0.25inNothing — fixed ratio
Centimetres (cm)0.635cmNothing — fixed ratio
Millimetres (mm)6.35mmNothing — fixed ratio
Picas (pc)1.5pcNothing — fixed ratio
Viewport width (vw)1.6667vwViewport
Viewport height (vh)2.6667vhViewport

px to rem at a 16px root

8px = 0.5rem10px = 0.625rem12px = 0.75rem14px = 0.875rem16px = 1rem18px = 1.125rem20px = 1.25rem24px = 1.5rem28px = 1.75rem32px = 2rem36px = 2.25rem40px = 2.5rem48px = 3rem56px = 3.5rem64px = 4rem80px = 5rem96px = 6rem

rem is the accessible default for type and spacing: it scales with the reader's own browser font-size setting, which a pixel value ignores entirely. The one place to keep px is where a value must not scale — a hairline border, or a media query breakpoint, where em and rem both resolve against the browser default rather than your root rule.

How to use the css unit converter

  1. 1Enter a value and choose the unit you are converting from.
  2. 2Set the root font size if your stylesheet changes it from the browser default of 16px.
  3. 3Set the element font size if you are working with em or percentage values inside a component.
  4. 4Set the viewport dimensions if you need vw or vh.
  5. 5Copy the converted value straight into your stylesheet from any row.

Examples

The everyday conversion

Input
24px at a 16px root
Result
1.5rem · 1.5em · 18pt · 150%

A 10px root font size

Input
24px at a 10px root
Result
2.4rem — the trick some design systems use to make the arithmetic trivial

Setting html { font-size: 62.5% } makes 1rem = 10px, which is why the same pixel value gives a different rem figure here.

em inside a nested component

Input
24px where the element's own font size is 20px
Result
1.2em — not 1.5em, because em resolves against the element, not the root

About the css unit converter

Why CSS units need a context and metres do not

Every other converter on this site turns one fixed quantity into another: a kilogram is a kilogram wherever you measure it. Most CSS units are not like that. They are defined against something else on the page, and that is precisely why they are useful — a layout built in rem responds to a reader who has set their browser to large text, and a layout built in px does not.

The consequence is that a converter that hardcodes 16px is answering a different question from the one you asked, any time your stylesheet says otherwise. Making the base an input costs one extra field and removes an entire class of wrong answer.

The 62.5% trick, and why it is contentious

Setting html { font-size: 62.5% } makes 1rem equal 10px, which turns every conversion into a decimal shift: 24px is 2.4rem, no arithmetic required. It is popular for exactly that reason.

The objection is that it does not remove the pixel thinking, it just makes it convenient — and that it leaves every element inheriting a 10px font size until something sets it back, which is easy to forget on a component that arrives later. Both positions are defensible. What matters here is that the converter handles either, because the answer genuinely differs.

A rounding note

Values are shown to four decimal places and trailing zeros are dropped, which is more precision than any stylesheet needs. Browsers compute layout in fractions of a pixel and then snap to the device grid when painting, so 1.4375rem and 1.44rem are indistinguishable on screen.

Rounding to two or three decimals in your source is usually the right call for readability. The exception is a value that gets multiplied — a line height, or a modular type scale — where rounding early compounds through the scale and the sizes drift from where the ratio intended them.

Frequently asked questions

What is the difference between rem and em?
rem always resolves against the root element's font size, so it is one number for the whole document. em resolves against the current element's font size — except on the font-size property itself, where it means the parent's. That distinction is why em compounds: a 1.2em font size inside another 1.2em font size gives 1.44 times the original, and three levels deep the text is 73% larger than intended. rem does not compound, which is why it is the safer default.
Should I use px or rem?
rem for anything a reader might want bigger — body text, headings, line height, and usually spacing, since spacing that does not grow with the text produces cramped layouts at large sizes. px for things that must not scale: a hairline border, a 1px separator, sometimes a fixed icon size. The reason matters more than the rule: a browser's font-size setting scales rem and leaves px alone, so a px-only stylesheet ignores an accessibility preference the reader has explicitly set.
Why does 1pt equal 1.333px exactly?
Because the CSS specification defines 1in as exactly 96px, and a point has always been 1/72 of an inch. 96 divided by 72 is 4/3. The ratio is fixed by the specification and does not vary with the screen — which also means a CSS inch is not a real inch on a monitor. Only in print output do the physical units mean anything physical.
Are CSS pixels the same as screen pixels?
No. A CSS pixel is a reference unit, roughly 1/96 inch at arm's length. On a high-density display one CSS pixel covers several hardware pixels — three each way on a typical 3x phone screen. That indirection is the reason a stylesheet written in 2010 still renders at a sensible size on a modern phone instead of appearing microscopic.
Why do em and rem behave oddly in media queries?
Inside a media query both resolve against the browser's default font size, not against your root rule. A stylesheet with html { font-size: 62.5% } still gets 16px per em in its breakpoints. This surprises people who assume the root rule applies everywhere, and it is a good reason to write breakpoints in em deliberately rather than by accident.
What about vw and vh?
They are 1% of the viewport width and height, so they depend entirely on the window — the figures here are for the dimensions you enter. vh has a well-known problem on mobile browsers, where the value is calculated against the largest possible viewport and then the address bar covers part of it. The newer dvh, svh and lvh units exist specifically to give you a choice about which viewport is meant.

Related tools