The conversion from pixels (px) to em units in web design and typography is based on the concept of relative sizing. Although "px" is not fixed size, it represents a number of dots in a given fonts. The "em" on the other hand represents a relative unit of measurement.
| Pixels | EM |
|---|---|
| 1px | 0.063em |
| 2px | 0.125em |
| 3px | 0.188em |
| 6px | 0.375em |
| 8px | 0.5em |
| 10px | 0.625em |
| 12px | 0.75em |
| 14px | 0.875em |
| 16px | 1em |
| 18px | 1.125em |
| 20px | 1.25em |
| 25px | 1.563em |
| 28px | 1.75em |
| 32px | 2em |
| 36px | 2.25em |
| 40px | 2.5em |
| 44px | 2.75em |
| 50px | 3.125em |
| 56px | 3.5em |
| 64px | 4em |
| 75px | 4.688em |
| 80px | 5em |
| 90px | 5.625em |
| 100px | 6.25em |
| EM | Pixels |
|---|---|
| 0.01em | 0.16px |
| 0.05em | 0.8px |
| 0.08em | 1.28px |
| 0.1em | 1.6px |
| 0.15em | 2.4px |
| 0.2em | 3.2px |
| 0.5em | 8px |
| 1em | 16px |
| 2em | 32px |
| 3em | 48px |
| 4em | 64px |
| 5em | 80px |
| 6em | 96px |
| 8em | 128px |
| 10em | 160px |
| 15em | 240px |
| 20em | 320px |
| 30em | 480px |
| 40em | 640px |
| 50em | 800px |
| 60em | 960px |
| 70em | 1120px |
| 80em | 1280px |
| 100em | 1600px |
The "px" is an abbreviation for "pixels". Pixels are the smallest unit of measurement for displaying digital content on screens, such as computer monitors, smartphones, and tablets. A pixel is a dot that can emit light of a specific color. These pixels are arranged in a grid to form images, text, and graphics on your screen. 16px represents 16 pixels x 16 pixels of a font size.
The "em" unit is a relative unit of measurement in CSS that is typically used for setting text on a web page. It is relative to the font size of the parent element. If default font size of the webpage is 16 pixels, then 1em = 16px.
