Home > Format > PX to EM Converter

Other Tools

URL ParserJSON to YAMLJSON ⇄ TOON ConverterGenerate TypeScript Types and JSON Schema from JSONINI to JSON ConverterSQL FormatterNumber to ChineseCookie Converter – Netscape to JSON & JSON to NetscapeYAML(YML) FormatterXML Formatter

PX to EM Converter

Convert between pixels (PX) and em units with custom context font size

PX → EM

Conversion Formula

PX → EM: em = px ÷ base

EM → PX: px = em × base

Current base size: 16px

Common Conversion Table

PXEM (12px)EM (16px)EM (20px)EM (24px)
12px1.0000em 0.7500em 0.6000em 0.5000em
14px1.1667em 0.8750em 0.7000em 0.5833em
16px1.3333em 1.0000em 0.8000em 0.6667em
18px1.5000em 1.1250em 0.9000em 0.7500em
20px1.6667em 1.2500em 1.0000em 0.8333em
24px2.0000em 1.5000em 1.2000em 1.0000em
28px2.3333em 1.7500em 1.4000em 1.1667em
32px2.6667em 2.0000em 1.6000em 1.3333em
36px3.0000em 2.2500em 1.8000em 1.5000em
48px4.0000em 3.0000em 2.4000em 2.0000em

Tool Overview: PX to EM Converter

The PX to EM Converter switches between pixel and em units using a configurable context font size. It's handy for scalable components and consistent typography in CSS.

What Is PX to EM Converter?

PX to EM Converter converts PX to EM and produces output ready to use.

Common Use Cases

  • PX↔EM format migration
  • Use PX data in EM workflows or code generation
  • Validate conversion results against specs

What Are PX and EM?

PX is a fixed pixel unit, while EM scales relative to the current font size. Converting PX to EM helps typography and spacing scale with parent text sizes, which is ideal for responsive layouts.

How to Use

  1. Choose the conversion direction (PX → EM or EM → PX).
  2. Set the context font size (base).
  3. Enter a value to get the result instantly.

Features

  • Bidirectional conversion between PX and EM
  • Custom context font size presets and manual input
  • Common conversion table for quick reference

Formulas

  • PX → EM: em = px ÷ base
  • EM → PX: px = em × base

Examples

  • 16px with a 16px context = 1em
  • 24px with a 16px context = 1.5em
  • 18px with a 12px context = 1.5em

❓ FAQ

Q1: What should I use for the base value?
A: Use the parent element's font-size, typically 16px in most browsers.

Q2: When should I prefer EM?
A: Use EM for components that need to scale with text size, such as accessibility-friendly UIs.

Q3: Are decimals okay?
A: Yes. Keeping 2-3 decimal places usually balances accuracy and readability.