CSS Units Calculator

Frequently Asked Questions

How do px, rem, and em relate?

rem is relative to the root font size and em to the element's own font size. At a 16 px root, 1 rem = 16 px, so 24 px = 24 ÷ 16 = 1.5 rem.

How do I convert px to rem?

Divide pixels by the root font size: rem = px ÷ root-px. With a 16 px root, 10 px = 0.625 rem and 32 px = 2 rem.

How does pt relate to px on the web?

CSS defines 1 pt = 1/72 inch and 1 px = 1/96 inch, so 1 pt = 96 ÷ 72 = 1.333… px. Thus 12 pt ≈ 16 px, which is why 12 pt and a 16 px root often coincide.

When should I use rem vs em?

Use rem for consistent, predictable sizing tied to the root (good for type scales and spacing), and em when you want a value to scale with its local context, such as padding that grows with a button's font size.

Provided by AllCalculators.io
Free online calculators for everyday. No registration required.

Estimates for informational purposes only.

Important Disclaimer: Estimates for informational purposes only.

This calculator provides estimates for informational purposes only. Results are based on assumptions and may not reflect actual outcomes. Consult qualified professionals in relevant fields before making important decisions based on these results.

JavaScript is required to use the interactive calculator above. The questions and answers below remain readable without JavaScript.

How This Calculator Works

CSS lets you size things in several units, and mixing them is a common source of layout bugs. The four most common length units for typography and spacing are px (an absolute device pixel in CSS terms), rem (relative to the root font size, normally the <html> element), em (relative to the current element's own font size, which it inherits from its parent), and pt (a print point, fixed at 1/72 inch). This calculator converts a value from any one of these to any other, given a configurable root font size (default 16px, the browser standard) and a parent font size for em math. It shows the value in all four units at once plus the ready-to-paste CSS for your chosen target, so you can move between a designer's pixel spec and a responsive rem-based stylesheet without guessing.

Formula / Method

Everything routes through pixels as the common base. To pixels: px stays as-is; rem × root; em × parentFontSize; and pt × (96 ÷ 72), because CSS defines 96px per inch and 72pt per inch, so 1pt = 1.333…px. From pixels back out: divide by root for rem, divide by the parent size for em, and multiply by (72 ÷ 96) for pt. The full conversion is therefore output = fromPx(toPx(value)). The root font size defaults to 16px because that is the unstyled browser default; if your design system sets html { font-size: 62.5% } (10px) the rem math shifts accordingly, which is exactly why the root is an input here.

Worked Example

Convert 24px to rem with a 16px root. 24px is already in pixels, so output = 24 ÷ 16 = 1.5rem. The same 24px is 24 ÷ 16 = 1.5em if the parent font size is also 16px; if the parent is 20px instead, 24px = 24 ÷ 20 = 1.2em - this is the gotcha that makes em compound through nested elements. In points, 24px × (72 ÷ 96) = 18pt. Going the other way, a print spec of 12pt equals 12 × (96 ÷ 72) = 16px = 1rem at the default root. The all-units panel shows each of these simultaneously so you can pick whichever fits your stylesheet.

Common Mistakes

Treating em and rem as interchangeable - em is relative to the element's own font size and compounds through nesting; rem is always relative to the fixed root.

Forgetting a non-default root - the 62.5% (10px) trick changes every rem conversion in the document.

Assuming 1pt = 1px - it is 1.333px in CSS; points are a print unit.

Using px for font sizes everywhere - it ignores the user's browser zoom and accessibility font-size preference, which rem respects.

Setting media-query breakpoints in px while sizing type in rem - mixing units makes responsive scaling inconsistent.

Tips & FAQ

Should I use rem or px for font sizes? Prefer rem for type and spacing so the layout scales with the user's chosen base font size; reserve px for hairline borders and fixed details. When is em useful? For sizing relative to the current text - padding inside a button, or an icon that should grow with its label. Why does em compound? Each nested element multiplies by its parent's font size, so 1.2em inside 1.2em inside 1.2em is 1.728× the root - easy to lose track of. What is the default root size? 16px in every major browser unless the user or your CSS changes it. Are these conversions exact? Yes for the px/pt relationship (a CSS-defined ratio); rem and em depend on the font sizes you supply. What about vw, vh, %, ch? Those depend on viewport or container dimensions and content, so they are not fixed conversions and are out of scope here. Use rem as your default scalable unit and reach for this tool whenever a design hands you pixels.

Frequently Asked Questions

Related Developer Tools Calculators