Calculates.app

PX to EM converter

px
em
Calculation based on a root font-size of
pixel.

Conversion tables

PixelEm
1 px0.0625 em
2 px0.125 em
3 px0.1875 em
4 px0.25 em
5 px0.3125 em
6 px0.375 em
8 px0.5 em
10 px0.625 em
12 px0.75 em
14 px0.875 em
15 px0.9375 em
16 px1 em
18 px1.125 em
20 px1.25 em
24 px1.5 em
25 px1.5625 em
28 px1.75 em
32 px2 em
36 px2.25 em
40 px2.5 em
44 px2.75 em
48 px3 em
50 px3.125 em
56 px3.5 em
64 px4 em
72 px4.5 em
75 px4.6875 em
80 px5 em
90 px5.625 em
EmPixel
1 em16 px
2 em32 px
3 em48 px
4 em64 px
5 em80 px
6 em96 px
8 em128 px
10 em160 px
12 em192 px
14 em224 px
15 em240 px
16 em256 px
18 em288 px
20 em320 px
24 em384 px
25 em400 px
28 em448 px
32 em512 px
36 em576 px
40 em640 px
44 em704 px
48 em768 px
50 em800 px
56 em896 px
64 em1024 px
72 em1152 px
75 em1200 px
80 em1280 px
90 em1440 px

PX and EM

In web development, PX (Pixel) and EM are units used to specify spacing, font sizes, and other length measurements in CSS. Here is a brief explanation of both units:

PX (Pixel)

  • Definition: A pixel is the smallest unit of a digital image or display.
  • Usage: Specifying in pixels (px) is absolute, meaning the size is fixed and independent of other factors.
  • Example: font-size: 16px; sets the font size to 16 pixels.
  • Advantages: Easy to use and predictable, as they have a fixed size.
  • Disadvantages: Can appear differently on various devices and screen resolutions and is less flexible when adapting to different screen sizes.

EM

  • Definition: An EM unit is relative to the font size of its nearest parent element. If no parent element is specified, it defaults to the browser's default font size, typically 16px.
  • Usage: Specifying in EM allows the size to be relative to the parent element's font size.
  • Example: If the parent element's font size is 16px, then 1em equals 16px. font-size: 2em; would be 32px.
  • Advantages: Flexible and scalable, as changes to the parent element's size affect all child elements.
  • Disadvantages: Can be complex to manage in deeply nested elements due to cumulative scaling effects.

Comparison and Recommendation

  • Absolute vs. Relative: PX units are absolute and do not scale, while EM units are relative and scale based on their parent element.
  • Responsive Design: EM units are often better suited for responsive design as they allow for scalable and flexible layouts.

Example

Here is a simple example to illustrate the difference:

body {
    font-size: 16px; /* Base font size */
}

h1 {
    font-size: 2em; /* 2em equals 32px if the parent font size is 16px */
}

p {
    font-size: 16px; /* Fixed font size of 16px */
}