Pixels to Em (px to em)
Last updated:
Pixels-to-em conversions translate absolute pixel-based design-mockup values into CSS-relative em-unit specifications for component-internal proportional scaling, accessibility-zoom-adaptive typography, and design-system documentation. A 16 px design-mockup body-text translates to 1 em CSS specification under the 16-px-default browser convention; a 24 px heading translates to 1.5 em; a 14 px small-text translates to 0.875 em; a 32 px display-heading translates to 2 em. The factor is the multiplicative ratio between the pixel and the em (computed-current-font-size) under the standard 16-px-default browser font-size: 1 px = 1/16 em = 0.0625 em. The conversion assumes the standard 16-px-default browser font-size on the html-and-body root and no nested font-size overrides.
How to convert Pixels to Em
Formula
em = px × 0.0625
To convert pixels to em, divide the px figure by 16 (or multiply by 0.0625) — under the standard 16-px-default browser convention. For mental math: divide the pixel value by 16, with common values memorisable as fractions: 8 px = 0.5 em, 12 px = 0.75 em, 14 px = 0.875 em, 16 px = 1 em, 18 px = 1.125 em, 20 px = 1.25 em, 24 px = 1.5 em, 32 px = 2 em, 40 px = 2.5 em. The conversion runs at every design-mockup-pixel-source to CSS-em-implementation-destination handoff boundary in modern design-system work, with the factor exact under the standard 16-px-default convention. The conversion is the absolute-pixel-to-CSS-relative-em scale-shift used when component-internal proportional scaling is desired.
Worked examples
Example 1 — 1 px
One CSS pixel equals 1/16 em (0.0625 em) under the standard 16-px-default browser font-size on the html-and-body root elements. The factor is the reciprocal of the em-to-px factor.
Example 2 — 16 px
Sixteen CSS pixels — the standard browser default body-text font-size — converts to exactly 1 em on the CSS-cascading-relative typography reference. The px-figure is the design-mockup absolute source; the em-figure is the CSS-relative implementation reference.
Example 3 — 24 px
Twenty-four CSS pixels — a typical web-page heading font-size — converts to 1.5 em on the CSS-cascading-relative typography reference. The em-figure preserves accessibility-zoom adaptation while specifying the visual heading size relative to body-text.
px to em conversion table
| px | em |
|---|---|
| 1 px | 0.0625 em |
| 2 px | 0.125 em |
| 3 px | 0.1875 em |
| 4 px | 0.25 em |
| 5 px | 0.3125 em |
| 6 px | 0.375 em |
| 7 px | 0.4375 em |
| 8 px | 0.5 em |
| 9 px | 0.5625 em |
| 10 px | 0.625 em |
| 15 px | 0.9375 em |
| 20 px | 1.25 em |
| 25 px | 1.5625 em |
| 30 px | 1.875 em |
| 40 px | 2.5 em |
| 50 px | 3.125 em |
| 75 px | 4.6875 em |
| 100 px | 6.25 em |
| 150 px | 9.375 em |
| 200 px | 12.5 em |
| 250 px | 15.625 em |
| 500 px | 31.25 em |
| 750 px | 46.875 em |
| 1000 px | 62.5 em |
| 2500 px | 156.25 em |
| 5000 px | 312.5 em |
Common px to em conversions
- 8 px=0.5 em
- 12 px=0.75 em
- 14 px=0.875 em
- 16 px=1 em
- 18 px=1.125 em
- 20 px=1.25 em
- 24 px=1.5 em
- 32 px=2 em
- 40 px=2.5 em
- 48 px=3 em
What is a Pixel?
In modern web typography under CSS specifications, the pixel (px) is the CSS reference pixel — a logical unit nominally equal to 1/96 inch (about 0.2646 mm) at the CSS reference viewing distance. The unit scales by device-pixel-ratio for high-DPI displays: a "Retina" display with 2x device-pixel-ratio renders one CSS pixel as a 2×2 grid of physical hardware pixels, preserving the visual size while doubling the rendering resolution. The CSS pixel relationship to other typography units is fixed under the 96-dpi convention: 1 inch = 96 px, 1 cm = 37.795 px, 1 mm = 3.7795 px, 1 pt = 4/3 px ≈ 1.3333 px, 1 pc = 16 px (with the pica equal to 12 points). The 96-dpi convention is the universal reference across modern web browsers (Chrome, Firefox, Safari, Edge), CSS specifications, and screen-typography work. Print-typography traditionally uses points (1 pt = 1/72 inch), and the 96-dpi-versus-72-dpi distinction explains the 4/3 factor between web pixels and print points. Modern operating systems may override the 96-dpi default through display-scaling settings, but CSS reference pixel calculations remain anchored to the 96-dpi reference.
The pixel (a portmanteau of "picture element") emerged in 1960s digital-image-processing research at JPL, Bell Labs, and similar laboratories as the discrete addressable unit of a raster-scanned digital image. The term was coined by JPL researcher Frederic C. Billingsley in 1965 in connection with the Mariner mission imaging-systems work. As digital displays evolved through the 1970s and 1980s — from monochrome CRT terminals through colour CRTs and into early LCD displays — the pixel became the fundamental unit of screen-based typography and graphics. The CSS Working Group standardised the CSS reference pixel in 1996 as part of CSS1, with the original definition tied to a 96-dpi reference viewing-distance of an arm's length from a desktop monitor. The 2010 CSS3 spec formalised the reference-pixel abstraction: 1 CSS pixel ≈ 1/96 inch at the reference viewing distance, scaled by device-pixel-ratio for high-DPI ("Retina") displays. Modern web typography overwhelmingly uses pixels (px) as the base unit for font-sizes, line-heights, padding, margins, and component dimensions, with em-and-rem relative units providing scale-relative-to-parent and scale-relative-to-root respectively. The 96-dpi reference convention also drives the conversion between pixels and traditional print-typography points (1 pt = 4/3 px at 96 dpi).
Web typography globally — CSS font-size, line-height, padding, margin, border-radius, border-width, and component-dimension specifications all use pixels as the base unit on every modern web browser. CSS frameworks (Tailwind CSS, Bootstrap, Material-UI, Ant Design) all use px as the primary spacing-and-typography unit, with em-and-rem relative units providing scale-relative-to-parent and scale-relative-to-root flexibility. Mobile-app typography on iOS uses points (which on iOS are implementation-detail-equivalent to CSS pixels at the reference scale, scaled by device-pixel-ratio), Android uses density-independent-pixels (dp/dip) which are similarly reference-scaled. Digital-image-processing and computer-graphics: image dimensions, sprite-sheet layouts, texture-coordinate-mapping all use pixels. Screen-typography: every modern operating-system font-rendering pipeline computes glyph dimensions in pixel-equivalent units. Game-development and game-engine frameworks (Unity, Unreal, Godot) use pixels as the canonical 2D-coordinate unit. Email-template typography uses pixels heavily for cross-client compatibility (Outlook, Gmail, Apple Mail all render pixel-based dimensions consistently). Print-design software (Adobe InDesign, Affinity Publisher) supports both pixel-and-point input with automatic 96-versus-72-dpi conversion at the print-output boundary.
What is a Em?
In modern CSS the em (em) is a relative-typography unit equal to the computed font-size of the current element. Under the standard 16-px-default browser font-size on the html-and-body root elements, 1 em = 16 px in the document body context. But the unit is element-relative: a child element with font-size: 14px has 1 em equal to 14 px in that element's context, with em-units in nested padding-margin-line-height specifications scaling relative to that 14 px. The cascading-relative behaviour distinguishes em from rem (root em, fixed to the root html font-size). Under typical 16-px-default browser conventions, 1 em ≈ 16 px and 1 px = 0.0625 em, but the relationship varies with the locally-computed font-size. The 16-px-default convention is the universal modern web reference: every major browser (Chrome, Firefox, Safari, Edge) defaults to 16 px html font-size unless overridden by user accessibility-and-zoom settings or page-specific CSS reset. The em-and-rem distinction is critical in modern CSS: em cascades, rem is absolute (relative-to-root).
The em as a typographic unit traces to traditional metal-type printing, where one em was the width of the metal block holding the capital letter "M" in the typeface — typically equal to the type's nominal point-size (so a 12-point font had a 12-point em width). The unit became the natural relative-typography reference, with em-dashes (typographic dashes the width of an em), em-spaces (spaces the width of an em), and em-quads all defined relative to the type-size. CSS adopted the em as a relative-typography unit in CSS1 (1996), defining 1 em as the computed font-size of the current element. Under the standard 16-px-default browser font-size, 1 em equals 16 px in the document body context, but the relationship is element-relative: a child element with font-size: 14px has 1 em equal to 14 px in that element's context. The relative-em-unit cascades through the CSS document tree, scaling padding-and-margins-and-line-heights proportionally to the local font-size. CSS3 formalised the rem (root em) unit, defined as the font-size of the root html element, providing a non-cascading absolute-relative unit for application-wide scaling. The em-and-rem pairing is the universal modern responsive-typography pattern in CSS, with em for component-internal scaling and rem for application-wide scaling.
Modern responsive-and-fluid web-typography globally — CSS components and design-systems use em for component-internal scaling that should adapt to the local font-size context. Padding, margin, line-height, border-radius, and component-dimension specifications scale proportionally to the local font-size when expressed in em, supporting accessibility-and-zoom adaptation and component-template-reusability across different parent-context font-sizes. Typography-component design (heading-paragraph-link-button-card) uses em for internal proportions: a button with 0.5em vertical-padding scales the padding proportionally to the button's font-size, supporting both small-action-button and large-CTA-button use cases from the same component code. CSS frameworks (Tailwind, Bootstrap, Material-UI) use em selectively for relative-spacing alongside px-or-rem for absolute-spacing. Email-template typography occasionally uses em for cross-client font-size scaling, though px-and-pt remain more universally compatible. Modern design-systems (Tailwind, Material Design, Carbon Design System) document em-versus-rem decision-trees for responsive-typography work, with em recommended for component-internal scaling and rem recommended for application-wide scaling. The em unit is not used in print-typography (where points are the canonical unit) — it is web-and-screen-typography specific.
Real-world uses for Pixels to Em
Pixel design-mockup specifications translated to CSS em for component-internal proportional scaling
Design-handoff from pixel-based design tools (Figma, Sketch, Adobe XD) to CSS-component implementation routinely translates pixel-based design-mockup values to em-based CSS specifications when component-internal proportional scaling is desired. A 16 px design-mockup body-text translates to 1 em CSS; a 24 px heading translates to 1.5 em; a 14 px caption translates to 0.875 em. The conversion runs at every design-tool-pixel-source to CSS-em-component-implementation step in modern design-system work, with the px-figure on the design-mockup source and the em-figure on the CSS-cascading-relative implementation.
Pixel padding-and-margin design values translated to em for cascading-relative component scaling
Pixel-based padding-and-margin values from design-mockups translate to em-based CSS specifications when component-internal proportional scaling is desired (the padding-and-margin should scale with the component's local font-size for accessibility-zoom adaptation). An 8 px vertical-padding translates to 0.5 em; a 16 px horizontal-padding translates to 1 em; a 24 px card-padding translates to 1.5 em. The conversion runs at every pixel-design-mockup to em-CSS-component-specification step for components requiring proportional internal scaling.
Pixel typography-scale values translated to em for design-system documentation hierarchy
Design-system typography-scale values in pixels (h1: 40px, h2: 32px, h3: 24px, body: 16px, small: 14px) translate to em for documentation hierarchy and component-template specifications. A 40 px h1 translates to 2.5 em; a 32 px h2 translates to 2 em; a 24 px h3 translates to 1.5 em; a 14 px small translates to 0.875 em. The conversion runs at every pixel-typography-scale source to em-design-system-documentation hierarchy step, supporting accessibility-zoom adaptation in the published design-system documentation.
Pixel breakpoint specifications translated to em for accessibility-zoom-aware media-query design
CSS media-query breakpoint specifications translate from pixel values to em values for accessibility-zoom-aware responsive design — em-based breakpoints adapt to user font-size preferences while pixel-based breakpoints do not. A 768 px tablet-breakpoint translates to 48 em; a 1024 px desktop-breakpoint translates to 64 em; a 480 px mobile-large-breakpoint translates to 30 em. The conversion runs at every pixel-breakpoint source to em-media-query-specification step in modern accessibility-aware responsive-design work.
When to use Em instead of Pixels
Use em whenever the destination is CSS specifications for component-internal proportional scaling, design-system documentation for relative-typography hierarchies, accessibility-zoom-adaptive typography, or any context where cascading-relative-to-current-font-size scaling is desired. Em supports responsive components that adapt to local font-size context, with padding-and-margin-and-line-height scaling proportionally to the component font-size. Stay in pixels when the destination is design-mockup specifications, design-handoff to design-tools, or any context requiring absolute pixel-based values for design-tool-import or developer-handoff documentation. For application-wide consistent scaling without cascading multiplication, use rem instead of em — the rem unit provides absolute-relative-to-root-font-size scaling regardless of DOM nesting depth, while em cascades through nested font-size overrides at every level of the document tree.
Common mistakes converting px to em
- Treating "1 px = 1 em" as a rough equivalence. The two units differ by a factor of 16 under the standard 16-px-default browser convention, so substituting one for the other gives a sixteenfold typography-size error. The correct factor is 1 px = 1/16 em = 0.0625 em.
- Forgetting that em cascades through nested font-size overrides. A "1 em" specification in a deeply-nested element with multiple parent font-size overrides multiplies the effective scaling at each level. For application-wide consistent scaling, use rem (root em) instead of em — rem is absolute-relative-to-root-font-size regardless of DOM nesting depth.
Frequently asked questions
How many em in 1 px?
One CSS pixel equals 1/16 em (0.0625 em) under the standard 16-px-default browser font-size on the html-and-body root elements. The factor is the reciprocal of the em-to-px factor and is exact under the standard convention. The "1 px = 0.0625 em" reference is universal in pixel-to-em CSS-relative conversion in modern design-system work.
How many em in 16 px (web body-text)?
Sixteen CSS pixels equals exactly 1 em under the standard 16-px-default browser convention. That is the standard browser-default body-text font-size translated to CSS-relative typography reference, with the px-figure on the design-mockup absolute source and the em-figure on the CSS-cascading-relative implementation. The 16 px to 1 em conversion is the canonical reference in modern design-system documentation.
How many em in 24 px (web heading)?
Twenty-four CSS pixels equals 1.5 em under the standard 16-px-default browser convention. That is a typical web-page heading font-size translated to CSS-relative typography reference. The em-figure preserves accessibility-zoom adaptation while specifying the visual heading size relative to body-text in the CSS implementation.
Quick way to convert pixels to em in my head?
Divide the pixel figure by 16 — straightforward division for common values. For 16 px that gives 1 em, for 24 px that gives 1.5 em, for 32 px that gives 2 em, for 8 px that gives 0.5 em, for 14 px that gives 0.875 em. The relationship is exact under the standard 16-px-default browser convention, with the simple "÷ 16" rule giving exact figures for everyday CSS-relative typography conversion.
How many pixels in 1 em?
One em equals 16 CSS pixels under the standard 16-px-default browser font-size on the html-and-body root elements. The relationship is element-relative — the actual conversion depends on the computed font-size of the current element. Under typical browser-default conditions and with no nested font-size overrides, 1 em = 16 px universally.
When does px-to-em conversion appear in real work?
It appears in pixel design-mockup specifications translated to CSS em for component-internal proportional scaling and in pixel padding-and-margin design values translated to em for cascading-relative component scaling. It also appears in pixel typography-scale values translated to em for design-system documentation hierarchy and in pixel breakpoint specifications translated to em for accessibility-zoom-aware media-query design. The conversion is one of the most-run pixel-to-CSS-relative typography conversions in modern design-system work.
How precise should px-to-em be for design work?
For design work the px-to-em conversion is exact under the standard 16-px-default browser convention (1 px = 0.0625 em), with the precision allowance coming from the underlying pixel-precision of the design-mockup source. Most design-system documentation uses common-fraction em values (0.5 em, 0.875 em, 1 em, 1.5 em, 2 em) corresponding to integer-pixel design-mockup sources, with intermediate values like 1.0625 em (17 px) used when integer-pixel granularity is needed.