The CSS Pixel Definition
According to the CSS specification, 1 inch = 96 CSS pixels, regardless of your screen's actual DPI.
This means:
- 96px = 1 CSS inch
- 1px = 1/96 of a CSS inch (0.0104 inches)
- 1cm = 96/2.54 = 37.8 CSS pixels
CSS Pixels vs Physical Pixels
A CSS pixel is a logical unit, not a physical screen pixel. On high-DPI displays:
- 1 CSS pixel = 1 physical pixel (standard displays)
- 1 CSS pixel = 4 physical pixels (2x Retina)
- 1 CSS pixel = 9 physical pixels (3x displays)
Conversion Formulas
CSS Pixels to Inches
inches = css_pixels / 96
Example: 480px = 480/96 = 5 inches (CSS)
Inches to CSS Pixels
css_pixels = inches × 96
Example: 3 inches = 3 × 96 = 288px
CSS Pixels to Physical Pixels
physical_pixels = css_pixels × device_pixel_ratio
Example on 2x Retina: 100px CSS = 200 physical pixels
Practical Examples
| CSS Pixels | CSS Inches | Actual Inches (96 PPI) | Actual Inches (220 PPI) |
|---|---|---|---|
| 96px | 1" | 1" | 0.44" |
| 192px | 2" | 2" | 0.87" |
| 480px | 5" | 5" | 2.18" |
Why This Matters
Understanding CSS pixel conversion is important when:
- Building print stylesheets
- Creating measurement tools or rulers
- Converting design specs from print to web
- Calculating physical UI element sizes
For most web development, use CSS pixels and let the browser handle device-specific rendering.