16
px
1
rem
12
pt
100
%
16
px
1
rem
12
pt
100
%
The EM to Pixels Converter converts CSS em units to pixels, points, and rem values. The formula is: pixels = em x font_size. The em unit is one of the most important relative units in web design and typography, enabling scalable, accessible, and responsive layouts.
The em unit is a relative length unit in CSS that is based on the computed font size of the element. If the parent element has a font size of 16px (the browser default), then 1em = 16px, 1.5em = 24px, and 0.875em = 14px. The em cascades: if a child element's font size is set to 1.5em inside a parent with 16px, and a grandchild is also set to 1.5em, the grandchild computes to 1.5 x 1.5 x 16 = 36px.
The em takes its name from traditional typography, where one em was the width of the capital letter "M" (or more precisely, the width of the em-quad, a square space whose side equals the type size). In digital typography, 1em = the current font size regardless of typeface.
The em unit is preferred over pixels for accessibility: users who increase their browser's default font size will see all em-based dimensions scale proportionally, maintaining readability and layout proportions. Many accessibility guidelines (WCAG) recommend using relative units for text.
The converter also shows the equivalent in points (at standard screen resolution of 96 DPI, where 1pt = 96/72 px = 1.333px) and rem (root em, always relative to the root font size, typically 16px). Rem avoids the cascading multiplication issue of em.
The formula: px = em x font_size. For points at 96 DPI screen: pt = px x 72/96 = px x 0.75. For rem (assuming root = 16px): rem = px / 16. The base font size parameter represents the computed font size of the current element's context.
Common em values in web design: body text: 1em, h1: 2em, h2: 1.5em, small text: 0.875em, paragraph spacing: 1.5em, sidebar: 0.9em. Using em for margins and padding creates layouts that scale with text size.
Inputs
Results
1.5em = 24px (common heading size)
Inputs
Results
0.875em = 14px (small text)
An em is a relative CSS unit equal to the computed font size of the element. If font-size is 16px, then 1em = 16px. It scales proportionally with text size.
Multiply the em value by the current font size in pixels. For example, 2em at 16px base = 32px.
The default font size in all major browsers is 16px. So at the root level, 1em = 1rem = 16px unless overridden by CSS.
Em is relative to the parent element's font size and compounds through nesting. Rem (root em) is always relative to the root (html) element's font size, avoiding compounding.
Em units scale with user font size preferences, improving accessibility. When a user increases their browser's font size, em-based layouts adapt proportionally.
Common conventions: h1 = 2em (32px at 16px base), h2 = 1.5em (24px), h3 = 1.25em (20px), h4 = 1.125em (18px), h5 = 1em (16px), h6 = 0.875em (14px).
Divide pixels by the base font size. For example, 24px / 16px = 1.5em. This assumes the parent font size is 16px.
If line-height is set in em, it is relative to the element's own font size. For example, font-size: 16px with line-height: 1.5em gives 24px line height.
If a parent is 1.2em (19.2px) and a child is also 1.2em, the child computes to 1.2 x 19.2 = 23.04px, not 19.2px. This cascading multiplication can cause unexpected sizes. Rem solves this.
Use rem for global sizing (font-size, margins, max-width) to avoid compounding. Use em for component-local spacing (padding, margins within a component) so they scale with the component's font size.
Roboculator Team
The Roboculator Team explains calculations, planning tools, and practical formulas in clear language for real-life situations.
How helpful was this calculator?
Be the first to rate!
