CSS units

Convert px, rem, em, pt, % and vw

No database: AIMRAN doesn't store your files, text or results

What is CSS units?

In web design there are many ways to measure: pixels, rem, em, points or percentages of the screen. This tool converts a value from one unit to all the others so you don't have to do the math.

You can set the page font size, the parent element's font size and the viewport size so the result is exact for your case.

How to use it

  1. Enter the value and choose its unit: px, rem, em, pt, %, vw or vh.
  2. Under “Context”, set the root font size, the parent font size and the viewport width and height.
  3. Copy the equivalent you need.
  4. Check the quick reference table from px to rem, pt and vw.

Advantages

Technical details

All conversions go through CSS pixels. 1 rem equals the root element's font size (html, 16 px by default); 1 em and 100% equal the parent element's font size; 1 pt = 1/72 inch = 96/72 px ≈ 1.333 px, per the CSS definition of 96 px per inch; 1 vw is 1% of the viewport width and 1 vh 1% of its height (1440 × 900 px by default, configurable). % is interpreted as a percentage of the font size, which is its meaning in font-size. Results are rounded to four decimal places.

Frequently asked questions

How many pixels is 1 rem?

It depends on the root font size. By default it's usually 16 px, so 1 rem = 16 px and 24 px = 1.5 rem.

What's the difference between rem and em?

rem is based on the root element's (html) font size and is the same across the page. em is based on the parent element's font size, so it compounds when elements are nested.

How do I convert px to rem?

Divide the pixels by the root font size. With a 16 px base, 14 px is 0.875 rem.

How many px is 12 pt?

12 pt is 16 px, because in CSS 1 pt equals 1.333 px.

What are vw and vh?

Viewport-relative units: 1 vw is 1% of the width and 1 vh is 1% of the height of the visible area.

More Developers tools