Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Aaron Coursolle
18,014 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
12,661 Points72 pixels per inch is the standard
A.J. Kandy
Courses Plus Student 12,422 PointsThe 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.
Aaron Coursolle
18,014 PointsUpdate: "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."