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.
PX ↔︎ EM conversion tables
| 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 |
What are PX and EM in fonts?
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.