PFVPFV Tools
All tools

CSS Unit Converter

Convert between px, rem, em, pt, and % using configurable root and parent font sizes.

  • css
  • pixel
  • rem
  • em
  • pt
  • point
  • percent
  • typography
  • responsive

About CSS Unit Converter

CSS lets you size things in a handful of different units, and the choice matters more than it looks. Pixels (px) are fixed — they ignore the user's preferred text size and don't scale when someone zooms with browser controls. Rem and em are relative units that respect the user's settings: 1 rem equals the root font-size (the html element, usually 16 px by default), and 1 em equals the font-size of the current element's parent. Points (pt) come from print typography (1 pt = 1/72 of an inch ≈ 1.333 px), and percentages express size relative to whatever the property is being applied to.

This converter does the arithmetic both ways across all five units, with adjustable root and parent font sizes so you can model a real layout — for instance, a sidebar with a 14 px base where rem and em diverge.

How to use

Pick a unit from the dropdown and type a value. Every other unit's equivalent updates live underneath. Adjust "Root font size" if your project uses something other than the 16 px browser default (e.g. 62.5% / 10 px is a common base for "1 rem = 10 px" maths), and "Parent font size" when you're working inside an element with its own font-size declared — that's the figure em and % resolve against.

Click any result to copy the value with its unit. The URL keeps the value, source unit, and font sizes so you can share a specific calculation.

Frequently asked questions

  • What's the difference between rem and em?

    Both are relative units, but they're relative to different things. 1 rem is always the root font-size — the size set on the html element, typically 16 px by default. 1 em is the font-size of the current element's parent, which means em values cascade and can compound: an element with 1.2em inside another element with 1.2em ends up at 1.44 × the grandparent's size. Rem avoids that compounding, which is why most modern stylesheets use rem for spacing and font-size.

  • Why is 1 pt equal to 1.333 px?

    CSS defines 1 inch as 96 pixels (a reference value, not a physical measurement) and 1 point as 1/72 of an inch — so 1 pt = 96 / 72 = 1.333… px. The 96-pixels-per-inch convention dates back to early Windows display drivers; modern devices have wildly varying physical pixel densities, so the relationship between a CSS pixel and a physical pixel is handled separately by the browser's zoom and device-pixel-ratio.

  • When should I use px and when rem?

    Use rem for anything text-related — font-size, line-height, paragraph spacing, margins and padding around text — so the layout respects users who increase their browser's default text size. Use px for things that genuinely should be fixed regardless of font preferences: hairline borders, small icon sizes, exact image dimensions. Avoid em for spacing unless you specifically want the cascading behaviour.

  • What does the percentage unit mean?

    It depends on the CSS property. For font-size, 100% equals the parent's font-size — identical to 1em. For width and height, 100% is the containing block's width/height. For line-height, 100% is the element's own font-size. This converter treats % the same way as em (relative to parent font-size), which is correct when you're typing percentages into font-size declarations.

  • Why is the default root font size 16 px?

    Because that's the default that all major browsers ship with for the html element — unless the user has overridden it in their preferences. If a stylesheet doesn't set a root font-size, "1rem" resolves to 16px. Some teams set html { font-size: 62.5% } to make "1rem = 10px" maths easier; if you do that, change the root font size here to 10 to match.

More Web & Dev tools