CSS Unit Converter: Convert Between px, rem, em, vw, vh & pt

CSS offers many unit types, and picking the right one matters for responsive design, accessibility, and maintainability. Converting between px, rem, em, and viewport units by hand is error-prone, especially when you need to maintain precise proportions across your stylesheet.

CSS Units Explained

px (Pixels)

The most straightforward unit. One CSS pixel is a fixed-size unit that corresponds to one device pixel at standard resolution (though it scales on high-DPI screens). Pixels are absolute and predictable.

font-size: 16px;
padding: 24px;

Best for: Borders, box shadows, small fixed-size elements, and cases where you need exact pixel control.

rem (Root Em)

Relative to the root element’s font size. By default, browsers set the root font size to 16px, so 1rem = 16px. If the user changes their browser’s default font size, rem values scale accordingly.

/* With default root font-size: 16px */
font-size: 1rem;     /* 16px */
font-size: 1.5rem;   /* 24px */
padding: 2rem;       /* 32px */

Best for: Font sizes, spacing, and layout dimensions. Rem is the foundation of accessible, scalable design.

em (Em)

Relative to the font size of the parent element. This makes em values compound when nested, which can be both powerful and confusing.

/* Parent has font-size: 16px */
.child {
  font-size: 1.5em;  /* 24px */
  padding: 1em;      /* 24px (relative to this element's font-size) */
}

Best for: Component-internal spacing that should scale with the component’s font size, like padding inside a button.

vw (Viewport Width)

Equal to 1% of the viewport width. 100vw is the full width of the browser window. Useful for fluid typography and full-width layouts.

font-size: 5vw;    /* 5% of viewport width */
width: 50vw;       /* Half the viewport width */

Best for: Fluid typography, full-bleed layouts, and elements that should scale with the browser window.

vh (Viewport Height)

Equal to 1% of the viewport height. 100vh is the full height of the browser window. Often used for hero sections and full-screen layouts.

height: 100vh;     /* Full viewport height */
min-height: 50vh;  /* At least half the viewport */

Best for: Hero sections, full-screen overlays, and vertical spacing relative to the screen.

pt (Points)

A traditional print unit. One point equals 1/72 of an inch. Points are primarily used in print stylesheets and PDF generation.

/* In a print stylesheet */
@media print {
  body { font-size: 12pt; }
}

Best for: Print stylesheets, PDF generation, and matching designs specified in points.

Conversion Reference

With a default root font-size of 16px and a viewport width of 1920px:

px	rem	em (at 16px parent)	vw (at 1920px)	pt
1	0.0625	0.0625	0.052	0.75
8	0.5	0.5	0.417	6
12	0.75	0.75	0.625	9
14	0.875	0.875	0.729	10.5
16	1	1	0.833	12
18	1.125	1.125	0.938	13.5
20	1.25	1.25	1.042	15
24	1.5	1.5	1.25	18
32	2	2	1.667	24
48	3	3	2.5	36

How to Use Our CSS Unit Converter

1. Enter a value in any unit field
2. Set the base font size if your project uses something other than 16px
3. Set the viewport width for accurate vw/vh conversions
4. Read the converted values across all other units instantly

Tips

• Most projects use a 16px root font size, but some use 10px (62.5% trick) for easier math, making 1rem = 10px
• When converting em values, remember to account for the parent element’s font size, not just the root
• Viewport unit conversions depend on the target screen size, so check multiple breakpoints
• For print output, convert your screen values to pt to match print specifications

When to Use Each Unit

Use rem for Typography and Spacing

Rem is the standard for modern web typography and spacing. It respects user font-size preferences (critical for accessibility) while remaining predictable since it only depends on the root size.

h1 { font-size: 2.5rem; }  /* 40px at default */
h2 { font-size: 2rem; }    /* 32px at default */
p  { font-size: 1rem; }    /* 16px at default */

Use px for Borders and Shadows

Fine details like borders and box shadows should use pixels. A 1px border should always be 1px regardless of font size settings. Shadows likewise need precise, absolute values.

border: 1px solid #ccc;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

Use em for Component-Relative Sizing

When you want padding or margins inside a component to scale with its font size, em is the right choice. A button with padding: 0.75em 1.5em looks proportionally correct at any font size.

Use vw/vh for Fluid Layouts

Viewport units are ideal for hero sections, full-screen overlays, and fluid typography that scales smoothly between breakpoints.

.hero { min-height: 100vh; }
.fluid-title { font-size: clamp(1.5rem, 4vw, 3rem); }

Frequently Asked Questions

What is the default root font-size? Browsers default to 16px, but users can change this in their settings. This is why rem is preferred for typography: it respects user preferences for accessibility.

Why not use px for everything? Pixel values do not scale with user font-size preferences. Users who set their browser font to 20px for readability will not benefit from your design if everything is in fixed pixels.

How do I convert rem to px? Multiply the rem value by the root font-size. With the default 16px root: 1.5rem x 16 = 24px. Our converter does this automatically.

Are vw and vh the same across devices? No. Viewport units are relative to the device’s browser window, so 10vw on a 1920px desktop is 192px, but on a 375px phone it is 37.5px. This is their strength for responsive design.

What about the 62.5% trick? Setting html { font-size: 62.5% } makes the root font-size 10px, so 1rem = 10px. This makes mental math easier (2.4rem = 24px) but can cause issues with third-party components that expect 16px.

---

Try our free CSS Unit Converter to convert between px, rem, em, vw, vh, and pt instantly.