Utill.net

CSS Unit Converter

px, rem, em & pt

Convert CSS px, rem, em, and pt values with a configurable base font size for design tokens, typography, and responsive layouts.

This conversion runs only in your browser — nothing is uploaded.

px
  • Root / base font size16px
  • Unitpx

em in real CSS follows the parent element's font-size; this tool approximates rem and em with the same root/base value.

  • px
  • rem
  • em
  • pt

What is this tool?

This CSS unit converter translates between px, rem, em, and pt using a configurable root / base font size (default 16px). It is built for front-end work where design specs, tokens, and browser rendering use different units.

rem is relative to the root element’s font-size. In real CSS, em is relative to the current element’s computed font-size (often inherited from a parent), so nested em values compound. This calculator uses the same base for both rem and em so you can do quick token math—treat em results as an approximation unless the element’s font-size equals the root.

pt follows the CSS screen convention of 96dpi (1pt = 96/72 px). That is not the same as print workflows at 72dpi or 300dpi.

When to use

  • Convert Figma or handoff pixel values into rem spacing and type scales
  • Check what 1.5rem or 12pt becomes when your root is not 16px
  • Document design-token tables (px ↔ rem) for a style guide
  • Sanity-check print-oriented pt sizes against screen CSS

How to use

  1. Enter the numeric value and choose the source unit (px, rem, em, or pt).
  2. Set the root / base font size in pixels (default 16). All rows update live.
  3. Copy a single unit with the row button, or copy all values at once.
  4. If you nest em in CSS, verify against the parent’s computed font-size—not only this table.

Examples

Input / settingOutputNotes
16px, base 1616.00px; 1.0000rem; 1.0000em; 12.00ptDefault browser root.
24px, base 1624.00px; 1.5000rem; 1.5000em; 18.00ptCommon heading / spacing token.
1.5rem, base 1624.00px; 1.5000rem; 1.5000em; 18.00ptRelative unit back to pixels.
12pt, base 1616.00px; 1.0000rem; 1.0000em; 12.00ptCSS 96dpi pt ↔ px edge case.

Practical pitfalls

  • em is parent-dependent. A child with font-size: 1.2em inside a parent at 1.25em is not 1.2 × root; it compounds. This tool’s em column assumes font-size equals the base—an approximation.
  • Changing html { font-size: 62.5% } (or similar) makes 1rem = 10px only if the browser default was 16px; set the base field to match your real root.
  • pt here is the CSS absolute unit at 96dpi, not physical print points at an arbitrary DPI.

Enter a numeric value only, such as 24, -0.5 or 1e2, without a unit suffix. A value such as 24px, a partial number or an infinite result shows an error. The root/base must be a finite number from 1 to 100px; empty or invalid bases do not produce results. For a focused calculation and a checked reference table, try px to rem, rem to px or rem to CSS points.

References

Last reviewed: 2026-10-11

Task guides with ready-to-use settings

Browse all task guides

Frequently asked questions

Which CSS units are supported?
px, rem, em, and pt. Percentage (%) and viewport units (vw/vh) are out of scope.
What is the root / base font size?
It is the pixel size used as 1rem (and, in this calculator, 1em). The default is 16px, matching most browser defaults for `html`. Change it if your design system sets a different root size.
Are rem and em the same here?
Yes in this tool—both use the chosen base. In real CSS, rem is always relative to the root, while em multiplies the current element’s computed font-size (often a parent), so nested em values compound.
How is pt converted?
CSS treats 1pt as 1/72 of an inch at 96dpi, so 1pt = 96/72 px (≈ 1.333px). Print DPI workflows differ.