Free Online CSS Unit Converter

Enter a value and its unit to see the equivalent in every other common CSS unit, based on a 16px root font size (adjustable).

px root size
—

Results are provided for informational purposes only and may contain errors. Please verify important information independently. Use of this tool is at your own risk.

What the CSS Unit Converter does

The CSS Unit Converter translates a length between px, rem, em, pt and %. Enter a value, pick its unit and set the base font size (16px by default, which is what browsers use unless the user changes it), and the page lists the same length in all five units.

The conversions follow the CSS specification: 1rem equals the root font size, so with a 16px base 1.5rem is 24px. A point is 1/72 of an inch and a CSS pixel is 1/96, so 12pt is 16px. Here em and % are calculated against the same base, which matches a font size set on an element whose parent uses the root size. Nothing leaves your browser.

When to use it

  • Turning pixel values from a design mock-up into rem so text scales with the user's font settings.
  • Converting a print stylesheet or a PDF design specified in points.
  • Checking what a % font size resolves to when you inherit someone else's CSS.
  • Building a type scale where every step needs a clean rem value.

Worked example

Input

24px, base 16px

Output

px   24.000
rem  1.5000
em   1.5000
pt   18.000
%    150.00%

Common questions about the CSS Unit Converter

Should I use rem or px for font sizes?

Use rem for font sizes and most spacing. When someone raises the default font size in their browser for readability, rem values grow with it, while px values stay fixed.

What is the difference between rem and em?

rem is always relative to the root (html) font size. em is relative to the font size of the current element, so nested elements multiply: 1.2em inside 1.2em is 1.44 times the base. The converter treats both against the base you enter.

Why does 1pt not equal 1px?

CSS fixes the inch at 96 pixels and a point is 1/72 of an inch, so 1pt is 1.333px. Twelve-point text in a word processor is therefore the same size as 16px on the web.

What base size should I enter?

Use 16 unless your stylesheet sets a different root size, such as html { font-size: 62.5%; }, which makes the base 10px. Enter whatever the html element resolves to.

Is this tool free?

Yes, it's free to use. No signup, no email required. Get results on this page.

How do I get my result?

Use the tool on this page. Your result appears here; no email delivery is required.