Pixel (px)
Definition: A pixel (short for picture element) is the smallest unit of a digital image or graphic that can be displayed and represented on a digital display device.
History/origin: The concept of pixels dates back to the early days of television and computer monitors. In modern web standards (CSS), a pixel is defined as 1/96th of an inch.
Current use: Pixels are the absolute standard for web design, screen resolution, and digital photography.
Em (Base 16px)
Definition: An Em is a scalable unit used in web design that is relative to the font-size of the element it is used in.
History/origin: Originally, an "em" was equal to the width of the capital letter "M" in a particular font size and typeface.
Current use: Em is used by web developers to create flexible and scalable layouts that adjust based on the user's font settings.
Pixel (px) to Em (Base 16px) Conversion Table
| Pixel (px) [px] | Em (Base 16px) [em] |
|---|---|
| 0.01 px | 0.000625 em |
| 0.1 px | 0.00625 em |
| 1 px | 0.0625 em |
| 2 px | 0.125 em |
| 3 px | 0.1875 em |
| 5 px | 0.3125 em |
| 10 px | 0.625 em |
| 20 px | 1.25 em |
| 50 px | 3.125 em |
| 100 px | 6.25 em |
| 1000 px | 62.5 em |
How to Convert Pixel (px) to Em (Base 16px)
1 px = 0.0625 em
1 em = 16 px
Example: convert 15 px to em:
15 px = 15 × 0.0625 em = 0.9375 em
Did You Know?
- Did you know? In web design, a "Pixel" (px) is actually a relative unit. On modern high-resolution screens (like Retina displays), one CSS pixel can actually consist of multiple physical device pixels!
- The name "Em" originally comes from the width of the capital letter "M" in a given typeface. Today, it represents a scale relative to the parent element's font size.