How do I convert px to rem?

Divide the pixel value by the root font size (default 16px). So 24px / 16 = 1.5rem. If your root font-size is different (e.g., 14px), divide by that value instead. This converter lets you set a custom root font-size for accurate conversions.

What is the difference between rem and em?

rem (root em) is relative to the root HTML element's font-size, making it consistent across the page. em is relative to the parent element's font-size, so it compounds when nested. 1rem always equals the root font-size (default 16px), while 1em equals whatever the parent's font-size is.

How many pixels is 1rem?

1rem equals the root font-size, which is 16px by default in all major browsers. If you set html { font-size: 14px }, then 1rem = 14px. Common rem values at 16px base: 0.5rem = 8px, 0.75rem = 12px, 1rem = 16px, 1.25rem = 20px, 1.5rem = 24px, 2rem = 32px.

What is 1vw in pixels?

1vw equals 1% of the viewport width. On a 1920px wide screen, 1vw = 19.2px. On a 375px mobile screen, 1vw = 3.75px. Similarly, 1vh equals 1% of the viewport height. These units are useful for responsive design that scales with the browser window.

When should I use px vs rem vs em?

Use rem for font sizes and spacing (scales with user preferences). Use em for component-internal spacing (scales with the component's font-size). Use px for borders, shadows, and fine details that should not scale. Use vw/vh for full-viewport layouts. Use % for fluid widths relative to parent containers.

How do I convert pt (points) to px?

Multiply points by 1.333 (or exactly 96/72). So 12pt = 16px, 14pt = 18.67px, 18pt = 24px, 24pt = 32px, 36pt = 48px, 72pt = 96px. Points come from print design (1pt = 1/72 inch), while CSS pixels are defined as 1/96 inch.

Back

CSS Unit Converter

CSS uses absolute units (px, pt, pc, in, cm, mm) and relative units (rem, em, vw, vh, %). 1rem = root font-size (16px default). 1em = parent font-size. 1vw = 1% of viewport width. 1pt = 1.333px. Common conversions: 16px = 1rem = 12pt. Use rem for accessible font sizing (respects user preferences), px for borders and fine detail, vw/vh for viewport-relative layouts.

Convert between all CSS units: px, rem, em, pt, vw, vh, %, cm, mm, in, pc. Adjustable root font size, parent font size, and viewport dimensions. Live preview bar.

Works OfflineDark ModeNo Ads

Value

Unit

Context Settings (root font-size, viewport, etc.)

Root Font Size (px)

Parent Font Size (px)

Viewport Width (px)

Viewport Height (px)

Conversions

16px

rem

1rem

1em

12pt

1pc

0.166667in

0.423333cm

4.233333mm

0.833333vw

1.481481vh

0.833333%

Live Preview

16px

Bar width capped at 600px for display. Actual value: 16px

CSS Unit Reference

Unit	Name	Description
px	Pixel	1px = 1/96 of an inch. Absolute on screen, depends on DPR for physical size.
rem	Root em	Relative to root font-size (html element). 1rem = 16px by default.
em	Em	Relative to parent font-size. 1em = parent font size in px.
pt	Point	Print unit. 1pt = 1/72 of an inch = 1.333px at 96 DPI.
pc	Pica	Print unit. 1pc = 12pt = 16px.
in	Inch	1in = 96px (CSS reference pixel).
cm	Centimeter	1cm = 37.795px (96 / 2.54).
mm	Millimeter	1mm = 3.7795px.
vw	Viewport width	1vw = 1% of viewport width.
vh	Viewport height	1vh = 1% of viewport height.
%	Percentage	Relative to parent element (width for horizontal, height for vertical).

How to Use

1
Enter a value
Type a number in the value field and select the source unit (px, rem, em, pt, vw, vh, etc.). Or click a preset like 16px or 1.5rem.
2
Adjust context settings
Click "Context Settings" to change root font-size (for rem), parent font-size (for em), and viewport dimensions (for vw/vh). Defaults: 16px root, 1920x1080 viewport.
3
Read all conversions
All 11 CSS unit equivalents are displayed simultaneously. The source unit is highlighted in blue. Values update in real-time as you type.
4
Copy and use
Click Copy to copy all conversions. The live preview bar shows the pixel equivalent visually for quick reference.

Frequently Asked Questions

How do I convert px to rem?: Divide the pixel value by the root font size (default 16px). So 24px / 16 = 1.5rem. If your root font-size is different (e.g., 14px), divide by that value instead. This converter lets you set a custom root font-size for accurate conversions.
What is the difference between rem and em?: rem (root em) is relative to the root HTML element's font-size, making it consistent across the page. em is relative to the parent element's font-size, so it compounds when nested. 1rem always equals the root font-size (default 16px), while 1em equals whatever the parent's font-size is.
How many pixels is 1rem?: 1rem equals the root font-size, which is 16px by default in all major browsers. If you set html { font-size: 14px }, then 1rem = 14px. Common rem values at 16px base: 0.5rem = 8px, 0.75rem = 12px, 1rem = 16px, 1.25rem = 20px, 1.5rem = 24px, 2rem = 32px.
What is 1vw in pixels?: 1vw equals 1% of the viewport width. On a 1920px wide screen, 1vw = 19.2px. On a 375px mobile screen, 1vw = 3.75px. Similarly, 1vh equals 1% of the viewport height. These units are useful for responsive design that scales with the browser window.
When should I use px vs rem vs em?: Use rem for font sizes and spacing (scales with user preferences). Use em for component-internal spacing (scales with the component's font-size). Use px for borders, shadows, and fine details that should not scale. Use vw/vh for full-viewport layouts. Use % for fluid widths relative to parent containers.
How do I convert pt (points) to px?: Multiply points by 1.333 (or exactly 96/72). So 12pt = 16px, 14pt = 18.67px, 18pt = 24px, 24pt = 32px, 36pt = 48px, 72pt = 96px. Points come from print design (1pt = 1/72 inch), while CSS pixels are defined as 1/96 inch.