Web design tools

CSS Unit Converter

Convert px, rem, em, pt, vw and vh with your own font sizes and viewport dimensions. See every equivalent and share the assumptions.

Your CSS references

Updates as you type

CSS value

Zero and negative lengths are supported; valid CSS properties have their own limits.

Convert from

CSS units describe layout, not image pixels.

Convert to

The result also includes equivalents in all six units.

Root font size CSS px

Use the root element’s computed font size. For rem in the root’s own font-size, use its initial font size instead. 16 is an editable example.

Em reference font size CSS px

For font-size, use the parent’s font size. For padding and most other lengths, use the element’s own computed font size.

Viewport width for vw CSS px

Enter the target layout viewport width. vw uses the large viewport; this is not native screen resolution.

Viewport height for vh CSS px

Enter the target large viewport height, with browser controls retracted. This tool does not calculate svh or dvh.

Use a decimal point, without commas. CSS values and references accept up to 4 decimal places.

Example result

1.5 rem

24 px · 24 CSS px

Root font: 16 px
Em reference: 16 px
Viewport: 1,440 × 900 px

Equivalent lengths at your entered references
Equivalent (px)	24
Equivalent (rem)	1.5
Equivalent (em)	1.5
Equivalent (pt)	18
Equivalent (vw)	1.666667
Equivalent (vh)	2.666667

These equivalents use your entered font and viewport sizes. They change when those references change.

For font-size in em, use the parent’s font size; for padding, use the element’s computed font size. rem uses the root font size, except on the root’s own font-size, where the initial font size is the reference.

CSS units do not measure image print PPI or the physical size of your screen. vw and vh use the large viewport; mobile browser controls can cover part of it.

Calculation details & inputs

Inputs used for this result
CSS value	24
Convert from	px — CSS pixels
Convert to	rem — root font
Root font size	16 CSS px
Em reference font size	16 CSS px
Viewport width for vw	1440 CSS px
Viewport height for vh	900 CSS px

Result details · 6 decimals or 3 significant digits for tiny values
Equivalent (px)	24
Equivalent (rem)	1.5
Equivalent (em)	1.5
Equivalent (pt)	18
Equivalent (vw)	1.666667
Equivalent (vh)	2.666667

Behind the numbers

How the calculation works

Convert to CSS px using the source unit’s reference, then divide by the target unit’s reference. 1pt = 96/72 CSS px; 1vw = viewport width/100.

These equivalents apply only to the font and viewport sizes entered. They are not an accessibility audit, a font-height measurement or a physical screen ruler.

Results use the numbers you enter. See the methodology for precision, accepted ranges and sharing behavior.

Reference notes

References checked September 28, 2026. Calculations and worked examples are our own.

Useful answers

Common questions

How do I convert px to rem?

Divide CSS pixels by the root font size in CSS pixels. With an 18 px root, 27 px equals 1.5 rem. If that root changes to 20 px, 1.5 rem corresponds to 30 px. Enter the actual root reference instead of assuming 16. When setting the root element’s own font-size in rem, the reference is its initial font size.

Why is em sometimes different from rem?

rem refers to the root font size. em depends on the element and property: an em value for font-size uses the parent’s font size, while em padding uses the element’s own computed font size. Enter the relevant reference explicitly.

How do pixels convert to points?

Within CSS, 96 px equals 72 pt, so multiply px by 0.75 to obtain pt. For example, 20 CSS px equals 15 pt. This does not involve the image PPI used for a photo print.

Why does the same vw value change on another viewport?

A vw unit is one percent of the relevant viewport width. At a 1200 CSS px viewport, 10 vw is 120 px. At 390 px it is 39 px. The share link includes the viewport used in the calculation.

Can I use vh to fit below a mobile address bar?

vh uses the large viewport. Mobile browser controls can cover part of that area. Consider the appropriate small or dynamic viewport units in your design and test in the target browser. This calculator computes the vw/vh references you enter; it does not simulate browser chrome.

A practical next read

Related print guides

All articles →

Web & screens3 min read

Image pixels vs CSS pixels: size a sharp web image deliberately

Understand source dimensions, displayed CSS size and density targets without confusing high-density web delivery with print PPI.

Read article

Photo printing3 min read

How large can I print my photo? A practical sizing workflow

Work from your original pixels to a realistic print size, then account for cropping, viewing distance and the file you actually send.

Read article

Photo printing3 min read

4×6, 5×7 or 8×10? What each photo size crops

Compare three familiar print shapes using one 3000 × 2000 photo, with crop dimensions, retained area and orientation explained.

Read article

Related calculators

All tools →

Print / 01

Pixels → print size

Convert pixels to inches, cm or mm at any PPI. Convert one measurement instantly, compare a PPI table, or calculate the width and height of an image.

Open tool

Print / 02

Print size → pixels

Start with a physical size and a target PPI. Calculate a whole-pixel canvas with an explicit rounding choice.

Open tool

Print / 03

Find an image’s DPI

Calculate the DPI (PPI) of an image at your print size: DPI = pixels ÷ inches. Choose a local image or enter its pixels, then compare fit versus crop.

Open tool