CSS PX-EM Converter

Convert between pixels, em, rem, and percentage units

🔄 Unit Conversion Tool

Understanding the relationship between different CSS units is crucial for responsive design. This converter helps you understand how px, em, rem, and % relate to each other.

Interactive Unit Converter

This is typically 16px in browsers

Conversion Formulas

📐

PX to EM

em = px ÷ parent font size 

/* 24px ÷ 16px = 1.5em */
font-size: 1.5em;
🔄

PX to REM

rem = px ÷ root font size 

/* 32px ÷ 16px = 2rem */
font-size: 2rem;
📊

PX to %

% = (px ÷ parent px) × 100 

/* 200px ÷ 400px × 100 = 50% */
width: 50%;
⚡

Quick Reference

Common conversions at 16px base

12px = 0.75rem 14px = 0.875rem 18px = 1.125rem 24px = 1.5rem

🔹 Understanding EM Units

The em unit is relative to the font size of the element or its parent. For font-size, 1em equals the parent's font size. For other properties like margin, it's relative to the element's own font size. This creates compounding in nested structures, which is powerful for scalable components but requires careful management. For example, a nested list with font-size: 0.9em will get progressively smaller. Ems are ideal for creating proportional spacing within a component (like button padding relative to its text size) where context-aware scaling is desired.

/* Parent has 20px font size */
.parent {
    font-size: 20px;
}

/* Child will be 30px (20px × 1.5) */
.child {
    font-size: 1.5em;
}

/* Nested child will be 45px (30px × 1.5) */
.nested-child {
    font-size: 1.5em;
}

Output:

Parent (20px)
Child (1.5em = 30px)
Nested Child (1.5em = 45px)

🔹 Understanding REM Units

The rem (root em) unit is always relative to the root <html> element's font size. With a default root of 16px, 1rem = 16px. Changing the root font size scales everything using rem proportionally. This provides a consistent, predictable reference across the entire document, avoiding the compounding issues of em. rem is the preferred unit for modern, accessible web design for typography, spacing, and sizing. It ensures your layout scales appropriately when users change their browser's default font size for accessibility.

/* Root font size */
html {
    font-size: 16px;
}

/* All rem values based on 16px */
.title {
    font-size: 2rem;     /* 32px */
}

.subtitle {
    font-size: 1.5rem;   /* 24px */
}

.body-text {
    font-size: 1rem;     /* 16px */
}

.small-text {
    font-size: 0.875rem; /* 14px */
}

Output:

Title (2rem = 32px)

Subtitle (1.5rem = 24px)

Body text (1rem = 16px)

Small text (0.875rem = 14px)

🔹 Percentage Conversions

Percentage units are calculated as a percentage of a parent element's corresponding property. For width: 50%, it's half the parent's width. For font-size: 150%, it's 1.5x the parent's font size. Crucially, vertical margins/padding percentages are relative to the parent's *width*, not height. This behavior is the foundation of responsive design techniques like fluid grids and maintaining aspect ratios (e.g., padding-top: 56.25% for a 16:9 video container). Understanding what each percentage refers to is essential for creating predictable, fluid layouts that adapt to different container sizes.

/* Parent container */
.container {
    width: 800px;
    font-size: 20px;
}

/* Child elements */
.half-width {
    width: 50%;          /* 400px (800px × 50%) */
}

.large-text {
    font-size: 150%;     /* 30px (20px × 150%) */
}

.small-text {
    font-size: 80%;      /* 16px (20px × 80%) */
}

Output:

Container (800px, 20px font)
Half width (50% = 400px)
Large text (150% = 30px)
Small text (80% = 16px)

🔹 Common Conversion Table

A quick reference for converting between rem units and pixels (assuming a 16px root). 0.25rem = 4px, 0.5rem = 8px, 0.75rem = 12px, 1rem = 16px, 1.25rem = 20px, 1.5rem = 24px, 2rem = 32px, 3rem = 48px, 4rem = 64px. This table helps translate designs from static pixels to responsive relative units. It's a valuable tool for developers to implement visual designs accurately while maintaining the benefits of scalable, accessible units. Many developers set the root to 62.5% (making 1rem = 10px) for even simpler math.

Pixels REM EM (16px parent) Percentage Use Case
12px 0.75rem 0.75em 75% Small text, captions
14px 0.875rem 0.875em 87.5% Secondary text
16px 1rem 1em 100% Body text (default)
18px 1.125rem 1.125em 112.5% Large body text
24px 1.5rem 1.5em 150% H3 headings
32px 2rem 2em 200% H2 headings
48px 3rem 3em 300% H1 headings

🔹 When to Use Each Unit

Best Practices:

  • px: Borders, shadows, precise layouts that shouldn't scale
  • rem: Font sizes, consistent spacing, main layout dimensions
  • em: Component-based spacing, buttons, relative sizing
  • %: Responsive widths, flexible containers

Responsive Design Tips:

  • Use rem for typography to maintain consistent scaling
  • Use % or vw/vh for responsive layouts
  • Combine units: width: calc(100% - 2rem)
  • Set a base font size in px, then use rem for everything else

🧠 Test Your Knowledge

If the root font size is 16px, what is 1.5rem in pixels?