CSS Unit Converter
Convert between px, rem, em, pt, %, and physical CSS units, with the root and parent font sizes taken into account.
How to use this calculator
- 1Enter a value and the unit it is in.
- 2Set the root font size if your CSS overrides the 16px default, and the parent font size for em and % conversions.
- 3Copy the generated CSS declaration, which includes a px comment for reference.
How the calculation works
rem = px ÷ root font size em = px ÷ parent font size pt = px × 72 ÷ 96 1in = 96px (CSS definition)- px
- CSS reference pixel — an absolute unit in CSS, not necessarily one hardware pixel
- rem
- Root em: relative to the html element's font size, browser default 16px
- em
- Relative to the current element's inherited font size, so it compounds through nesting
- pt
- Point: 1/72 of an inch, so 1pt = 1.3333px
CSS fixes 1 inch at 96 pixels by definition. This is a reference relationship, not a physical measurement — a CSS inch is not an inch on your screen, and on a phone it is nowhere close.
The em/rem distinction is the one that causes bugs. rem always refers to the root, so 1.5rem is the same everywhere. em refers to the parent, so nested elements multiply: 1.2em inside 1.2em inside 1.2em is 1.728 times the base size.
Percentages behave like em for font-size — both resolve against the parent — so 150% and 1.5em are equivalent in that context.
Worked example
24px in rem at the default root
- 1.The browser default root font size is 16px.
- 2.rem = 24 ÷ 16 = 1.5rem.
- 3.Since the parent is also 16px here, em gives the same 1.5em.
- 4.In points: 24 × 72 ÷ 96 = 18pt.
- 5.Writing 1.5rem rather than 24px means the text scales if the visitor has increased their browser font size.
Result: 1.5rem (18pt)
Why em compounds and rem does not
- 1.The parent element has a font size of 24px, not the 16px root.
- 2.em is relative to the parent: 1.2 × 24 = 28.8px.
- 3.The same 1.2rem would be relative to the root: 1.2 × 16 = 19.2px.
- 4.Nest another 1.2em inside and you get 34.56px, then 41.47px, and so on.
- 5.This compounding is why deeply nested em-based type drifts, and why rem is the safer default for font sizes.
Result: 28.8px — not the 19.2px rem would give
Why rem is the accessible default for type
Browsers let people change their default font size, and a meaningful number of users do — because of low vision, screen distance, or simple preference. That setting changes the root font size, so anything sized in rem scales with it automatically. Anything sized in px does not.
This is why fixed pixel type is an accessibility failure rather than a stylistic choice. A visitor who has set their browser to 20px because 16px is uncomfortable gets no benefit from a site that hardcodes 14px, and page zoom is a poorer substitute because it scales layout as well as text.
The counterproductive move is setting `html { font-size: 62.5% }` to make rem arithmetic easier — the old trick that makes 1rem equal 10px. It works, and it overrides the visitor's preference to do so, which defeats the entire purpose of using rem.
CSS pixels are not screen pixels
A CSS pixel is a reference unit, defined so that 96 of them make an inch and content stays roughly the same apparent size across devices. It is not a hardware pixel and has not been for over a decade.
On a typical phone, one CSS pixel covers three or more physical pixels — that ratio is what `devicePixelRatio` reports. This is why a 16px font looks about the same physical size on a phone and a desktop monitor despite wildly different pixel densities, and why images need 2× or 3× versions to look sharp.
The physical units — in, cm, mm, pt — inherit this abstraction and are therefore misleading on screen. A CSS inch is not an inch you can measure with a ruler. They are meaningful only in print stylesheets, where the browser maps them to real paper.
What this assumes, and where it stops
Assumptions
- The CSS specification's fixed relationship of 1in = 96px, which holds regardless of the physical display.
- The root font size defaults to 16px unless overridden, matching every major browser.
- Percentages for font-size resolve against the parent, as em does.
Limitations
- Absolute and font-relative units only. Viewport units (vw, vh, vmin, vmax) and container query units depend on runtime dimensions and cannot be converted statically.
- Percentages resolve differently by property — for width they refer to the containing block, not the font size. This calculator treats % as a font-size percentage.
- Physical units are only meaningful in print stylesheets. On screen a CSS inch is a definition, not a measurement.
- Does not model how em compounds through a specific DOM tree; it converts against the single parent size you supply.
Common questions
How do I convert px to rem?
Divide by the root font size, which browsers default to 16px. So 24px is 24 ÷ 16 = 1.5rem, and 12px is 0.75rem. If your CSS overrides the root font size, divide by that value instead.
What is the difference between em and rem?
rem is always relative to the root element's font size, so 1.5rem means the same thing anywhere on the page. em is relative to the parent's font size, so it compounds through nesting — 1.2em inside 1.2em inside 1.2em ends up 1.728 times the base size.
Should I use px or rem for font sizes?
rem, in almost all cases. It scales with the visitor's browser font-size preference, which people with low vision rely on. Reserve px for values that genuinely should not scale, such as hairline borders, and use em where something should size relative to its own text, like button padding.
Is 1 inch in CSS a real inch?
Not on screen. CSS defines 1in as exactly 96px as a fixed reference relationship, so a CSS inch has no connection to a physical inch on a display. Physical units are only meaningful in print stylesheets, where the browser maps them to actual paper dimensions.
Sources
Formula and content last reviewed on .
Results are estimates for information only, not professional advice.
Related calculators
Tools people commonly use alongside the css unit converter.