CSS CSS Basics Understanding Values and Units Pixel Units

Aaron Coursolle
Aaron Coursolle
18,013 Points

"Standard Screen" equals how many pixels per inch?

I learned in Nick's course that images are now often created at double size so they look better on higher definition devices. But ignoring that math for a moment, if I create an image, what ppi should I set it at for a "standard screen" (as far as css3 is concerned) for a 1:1 ratio.

3 Answers

Jon Peterson
Jon Peterson
12,661 Points

72 pixels per inch is the standard

A.J. Kandy
PLUS
A.J. Kandy
Courses Plus Student 12,422 Points

The answer is really "it depends." With high-resolution displays becoming more common on laptops and even desktop screens, you can't assume a specific pixel resolution anymore.

In any case, 72 dots per inch (dpi) mapping to pixels-per-inch (ppi) is an old, old standard that was based on the limitations of existing CRT displays, in order to implement PostScript, the language used to generate vector graphics in illustration and layout apps and in fonts used in laser printers - we're talking 1980s here. Roughly, one inch on screen equalled 72 pixels at normal zoom.

It was the standard on the Mac, but then Windows had a standard of 96dpi. And today's screens have great variety in pixel density - my MacBook Air has about 132ppi, for instance. A Retina MacBook would be about 264ppi. iPhones and some Android phones have far higher pixel densities. The absolute minimum you might think of using is 100dpi, but I would start a bit higher just to be safe.

If you want to dive deeper into this, Scott Kellum, the lead designer at Vox Media, has a great article at A List Apart which explains the current state of pixels in the Retina era.

http://alistapart.com/article/a-pixel-identity-crisis/

Aaron Coursolle
Aaron Coursolle
18,013 Points

Update: "px Relative to the viewing device. For screen display, typically one device pixel (dot) of the display. For printers and very high resolution screens one CSS pixel implies multiple device pixels, so that the number of pixel per inch stays around 96."

https://developer.mozilla.org/en-US/docs/Web/CSS/length