Loading Calculator...
Please wait a moment
Please wait a moment
Convert CSS em units to pixels with custom base font sizes. Perfect for responsive web design and CSS typography.
pixels = em × base_font_size
Example: 1 em at 16px base = 1 × 16 = 16 pixels
| Em | Pixels (px) | Common Use |
|---|---|---|
| 0.5 em | 8.00 px | Extra small text |
| 0.75 em | 12.00 px | Small text |
| 0.875 em | 14.00 px | Fine print |
| 1 em | 16.00 px | Base body text |
| 1.125 em | 18.00 px | Slightly larger |
| 1.25 em | 20.00 px | Lead paragraph |
| 1.5 em | 24.00 px | Subheading |
| 1.75 em | 28.00 px | Small heading |
| 2 em | 32.00 px | Medium heading |
| 2.5 em | 40.00 px | Large heading |
| 3 em | 48.00 px | Extra large heading |
The em unit is a relative length unit in CSS that scales based on the font size of its parent element. One em equals the computed font-size of the element on which it's used. The name "em" comes from typography, originally referring to the width of the capital letter "M" in a given typeface. In CSS, em units create scalable, flexible designs because they inherit and multiply based on context. For example, if a parent element has a font-size of 16px, then 1em equals 16px, 2em equals 32px, and 0.5em equals 8px within that parent's scope. This relative nature makes em units powerful for responsive design, allowing entire sections to scale proportionally. However, em units can compound through nested elements, which is why rem (root em) units were introduced to provide predictable scaling based on the root element instead.
Identify the parent element's font size. Browser default is typically 16px.
Take your em value and multiply it by the base font size in pixels.
The product gives you the pixel value. Example: 1.5em × 16px = 24px.
Remember that em values compound in nested elements, each relative to its parent.
Creating scalable text that adapts to different screen sizes and user preferences.
Building UI components that scale proportionally with their container.
Respecting user font size preferences for better readability.
Creating consistent margins and padding relative to text size.
Accommodating different character sizes and densities across languages.
Building flexible typography scales for component libraries.
Em units are relative to the parent element's font size, while rem (root em) units are always relative to the root html element's font size. Rem units don't compound through nesting, making them more predictable. Use em when you want components to scale with their container, and rem for consistent sizing across your entire site.
Em units respect user preferences and create more accessible designs. When users adjust their browser's default font size for readability, em-based layouts scale accordingly while pixel values remain fixed. Em units also make it easier to create proportionally-scaling components and maintain consistent vertical rhythm in typography.
Most browsers use 16px as the default font size for the root html element. However, users can change this in their browser settings, which is why using relative units like em or rem is important for accessibility. Never assume the base size will always be 16px—design systems should work regardless of the user's preference.
Em values multiply through nested elements. If a parent has font-size: 1.5em (24px at 16px base) and a child has font-size: 1.5em, the child's size is 1.5 × 24px = 36px, not 1.5 × 16px. This compounding can be useful but also requires careful planning. For simpler calculations, consider using rem instead.
Yes, using em for spacing creates proportional relationships with text size. For example, if you set margin-bottom: 1em, the spacing will always equal one line of text regardless of the font size. This maintains visual rhythm as text scales. However, for layout-level spacing, rem might be more appropriate to avoid compounding.
Divide the target pixel size by the parent element's font size. If your design shows 24px text and the parent is 16px, use 24 ÷ 16 = 1.5em. Many design tools and browser dev tools can show computed values to help verify your calculations. Consider creating a scale (like 0.75em, 1em, 1.25em, 1.5em) for consistency.