PX Converter – Free PX to REM, EM, VW, PT, CM & DP Tool

⚡ Free CSS Tools · MockupTemplate.net

PX Converter — Convert Pixels to REM, EM, VW, PT, CM & DP

Q: What is the base font size for PX to REM conversion?

The standard base font size is 16px (the browser default). So 16px = 1rem, 24px = 1.5rem, 32px = 2rem. Our converter lets you set a custom base if your project uses a different root font size.

Q: When should I use REM vs EM vs PX in CSS?

Use REM for font sizes and spacing that should scale with the user's browser preferences. Use EM when a value should scale relative to its parent element's font size. Use PX for precise, non-scalable values like borders, shadows, and icon sizes.

Q: How do I convert PX to VW?

To convert PX to VW: vw = (px / viewport width) * 100. For example, on a 1920px viewport, 192px = 10vw. VW is ideal for fluid layouts and clamp() typography that scales smoothly with viewport width.

Q: Is this PX converter free to use?

Yes, completely free. No account, no sign-up, no rate limits. The converter runs entirely in your browser — no data is sent to any server.

Type a pixel value and see all six CSS units instantly. Custom base font-size, viewport width, and DPI. Free, no sign-up, runs in your browser.

Pixel Value (px)

Base Font (px)

Viewport (px)

DPI

REM —

EM —

VW —

PT —

CM —

DP —

Enter a value in any unit below to see its PX equivalent:

REM

Enter a value above to calculate PX.

Scroll for formulas, tables & best practices

Free CSS Tools

Choose Your Conversion

Each card opens its dedicated converter page in a new tab. Use the live tool above for quick all-in-one conversions.

Rₑₘ

PX to REM

Root-relative units — the gold standard for accessible, scalable typography.

rem = px ÷ base

PX to EM

Parent-relative units — great for component-scoped sizing and button padding.

em = px ÷ base

PX to VW

Viewport-width units — fluid layouts and clamp() typography that scale with screen.

vw = (px ÷ vp) × 100

PX to PT

Print-ready points — used in CSS print stylesheets, PDFs, and desktop apps.

pt = px × 0.75

PX to CM

Physical centimetres — perfect for print media and physical product design.

cm = px × 2.54 ÷ 96

PX to DP

Density-independent pixels — the Android and mobile design standard.

dp = px × (160 ÷ dpi)

Introduction

What Is a PX Converter and Why Do You Need One?

When you write CSS, pixel values feel natural — they map directly to what you see on screen. But modern web development demands more than pixels. Accessibility guidelines ask for scalable type in rem or em. Fluid layouts use vw. Print stylesheets speak in pt and cm. Android engineers work in dp. Translating between these units manually wastes time and introduces rounding errors.

This free PX converter calculates all six units simultaneously as you type, using the exact formulas used by CSS engines. Built for front-end developers, UI designers, and anyone who touches CSS — with no sign-up, no ads, and no data leaving your browser.

Background

What Is a Pixel (px) in CSS?

In CSS, a pixel (px) is not a physical screen pixel — it's a reference pixel equal to 1/96th of an inch at arm's length, as defined by the W3C. On a typical 96 DPI monitor, 1 CSS pixel = 1 physical pixel. On a high-DPI (Retina) display, 1 CSS pixel might equal 2 or 3 physical pixels, but your CSS values stay the same — the browser handles scaling automatically.

Pixels are an absolute unit. They don't scale with the user's browser font-size preference, making them a poor choice for typography but ideal for borders, shadows, and fine-grained spacing where you need precise, fixed control.

REM PX to REM Converter

REM (root em) is relative to the font-size of the root <html> element. The browser default is 16px, so 1rem = 16px. If a user increases their browser font size to 20px, everything set in rem scales proportionally — a major accessibility win.

rem = px ÷ baseFontSize

Example: 24px ÷ 16 = 1.5rem. In CSS: font-size: 1.5rem;

REM is the recommended unit for font sizes, heading sizes, and most spacing values. It respects user preferences and keeps your design system consistent across all screen sizes and accessibility settings.

EM PX to EM Converter

EM is relative to the font size of the element's parent. This makes it powerful for component-scoped sizing — padding, margin, and border-radius that scale with the component's text — but can lead to compounding if deeply nested.

em = px ÷ parentFontSize

This converter assumes parentFontSize = baseFontSize (the most common case). Example: 18px ÷ 16 = 1.125em.

Tip: Use em for padding and spacing inside a component so it scales with the component's own font size, and rem for the font size itself.

VW PX to VW Converter

VW (viewport width) equals 1% of the viewport's width. It's the backbone of fluid typography and fully-responsive layouts — a heading set in vw grows and shrinks smoothly as the browser window resizes.

vw = (px ÷ viewportWidth) × 100

Example: On a 1920px viewport, 192px = 10vw. On a 375px phone screen, that same 10vw = 37.5px.

Modern best practice pairs vw with CSS clamp(): font-size: clamp(1rem, 2.5vw, 2rem); — fluid between screens, clamped at the edges.

PT PX to PT Converter

PT (point) is a typographic unit: 1pt = 1/72 of an inch. It predates digital design and remains widely used in print, PDFs, desktop applications, and email CSS.

pt = px × 0.75

Example: 16px × 0.75 = 12pt — the classic body text size in print design.

Use points in @media print stylesheets, where centimetres and points are more predictable than screen-relative units like rem or vw.

CM PX to CM Converter

CM (centimetre) is a physical absolute unit. At 96 DPI, 1 inch = 96px and 1 inch = 2.54cm.

cm = px × 2.54 ÷ 96

Example: 96px × 2.54 ÷ 96 = 2.54cm (exactly 1 inch).

Centimetres are invaluable in @media print when you need a margin of exactly 2cm, or when designing a business card at exactly 8.5cm × 5.4cm.

DP PX to DP Converter

DP (density-independent pixel), also called DIP, is the standard unit in Android development and mobile design tools (Figma, Sketch). It ensures UI elements appear the same physical size on screens with different pixel densities.

dp = px × (160 ÷ dpi)

At the baseline of 160 DPI (medium-density Android), 1px = 1dp. On a 320 DPI device (xhdpi), 1dp = 2px.

Example at 160 DPI: 24px × (160 ÷ 160) = 24dp. At 320 DPI: 24px × (160 ÷ 320) = 12dp.

Reference

PX to REM, EM, PT, CM & VW Conversion Table

Common pixel values converted at the standard base of 16px and 1920px viewport. Bookmark this for quick reference during development.

PX	REM (base 16)	EM (base 16)	PT	CM	VW (1920px)
8px	0.5rem	0.5em	6pt	0.2117cm	0.4167vw
10px	0.625rem	0.625em	7.5pt	0.2646cm	0.5208vw
12px	0.75rem	0.75em	9pt	0.3175cm	0.625vw
14px	0.875rem	0.875em	10.5pt	0.3704cm	0.7292vw
16px	1rem	1em	12pt	0.4233cm	0.8333vw
18px	1.125rem	1.125em	13.5pt	0.4763cm	0.9375vw
20px	1.25rem	1.25em	15pt	0.5292cm	1.0417vw
24px	1.5rem	1.5em	18pt	0.635cm	1.25vw
28px	1.75rem	1.75em	21pt	0.7408cm	1.4583vw
32px	2rem	2em	24pt	0.8467cm	1.6667vw
36px	2.25rem	2.25em	27pt	0.9525cm	1.875vw
40px	2.5rem	2.5em	30pt	1.0583cm	2.0833vw
48px	3rem	3em	36pt	1.27cm	2.5vw
64px	4rem	4em	48pt	1.6933cm	3.3333vw
80px	5rem	5em	60pt	2.1167cm	4.1667vw
96px	6rem	6em	72pt	2.54cm	5vw
128px	8rem	8em	96pt	3.3867cm	6.6667vw
160px	10rem	10em	120pt	4.2333cm	8.3333vw
256px	16rem	16em	192pt	6.7733cm	13.3333vw
320px	20rem	20em	240pt	8.4667cm	16.6667vw

Best Practices

PX vs REM vs EM vs VW — When to Use Which

Choosing the right CSS unit is a design decision. Here's a practical guide based on real-world front-end patterns:

✅ Use `px` for:

Border widths (border: 1px solid)
Box shadows and outlines
Small fixed icons and UI details
Media query breakpoints
Absolute positional offsets

✅ Use `rem` for:

Font sizes across the site
Global spacing scale (margin, padding, gap)
Component sizes that should scale
Accessible, user-preference-respecting layouts

✅ Use `em` for:

Padding inside buttons (scales with text)
Letter-spacing relative to font size
Component-internal spacing
Icon sizes placed next to text

✅ Use `vw` for:

Fluid display headings
Full-width hero sections
Clamped responsive typography
Containers with percentage-of-screen sizing

FAQ

Frequently Asked Questions

What is a PX to REM converter?

A PX to REM converter translates pixel values into REM (root em) units. REM is relative to the root <html> font size — usually 16px — making it ideal for scalable, accessible CSS typography and spacing. Instead of calculating 24 ÷ 16 = 1.5rem by hand every time, a converter does it instantly as you type.

What is the base font size for PX to REM conversion?

The standard base font size is 16px (the browser default). So 16px = 1rem, 24px = 1.5rem, 32px = 2rem. Our converter lets you set a custom base — for example, some design systems set html { font-size: 10px; } so that 1rem = 10px, making mental math easier for the team.

When should I use REM vs EM vs PX in CSS?

Use REM for font sizes and spacing that should scale with the user's browser preferences. Use EM when a value should scale relative to its parent element's font size — great for component-scoped sizing like button padding. Use PX for precise, non-scalable values like borders, box shadows, and fixed icon sizes that should never change regardless of user settings.

How do I convert PX to VW?

To convert PX to VW: vw = (px ÷ viewport width) × 100. For example, on a 1920px viewport, 192px = 10vw. VW is ideal for fluid layouts and clamp() typography: font-size: clamp(1rem, 2.5vw, 2rem); scales smoothly between viewports with safe min/max bounds.

Is this PX converter free to use?

Yes, completely free. No account required, no sign-up, no rate limits. The converter runs entirely in your browser — no data is ever sent to any server. Bookmark it and use it as often as you like, on any device.