Designer's guide to DPI

Designer's guide to DPI(sebastien-gabriel.com)

66 points by alfredxing 9 years ago | 11 comments

swerner 9 years ago |

I was expecting an article about DPI (as in raster printing dots), but it ended up being about PPI (as in screen pixels).

DPI in print is something I see many get wrong, and most don't understand the difference between DPI, LPI and PPI.

pawadu 9 years ago |

I find it hilarious that on a page about cross-platform design the left menu hides part of the article text on the ohh-so-common 1920x1080 displays.

I guess to some people cross-platform means "works on my imac 5K and my MBP retina"...

ovao 9 years ago |

> This statement is true for the range of devices' screen size it's used in, but as the screens are getting better and better, our eyes are now trained enough to perceive the pixels - especially for rounded UI elements.

I'm not quite sure where this thinking has come in. The "Retina" moniker applies to displays based on the resolution, the size of the display and typical viewing distances for devices of that size and type. What science has suggested that our visual systems get better at resolving detail as display densities increase?

bfred_it 9 years ago | |

Think of when you used a retina display for a while and then looked at a non-retina one:

"ew, why is this disgusting now?"

I think that's what he's trying to say: not that our vision physically improved, but that we started to notice the roughness of lower-res displays.

Imagine a future where all displays are "Retina" at 1-inch distance; you'll be annoyed that when looking at a lower-res display it won't show someone's nose hair.

anmorgan 9 years ago |

I know it's picky and this article is trying to be simplistic, but pixels do have a physical size. That is why there are optimal resolutions, starting with a 1:1 representation of physical to software.

Edit: Actually the first paragraph of "Resolution, pixel and physical size" kind of really causes confusion, since he is trying to redefine standard definitions, and then tries to provide reasoning for the redefinition. This is mainly a note of caution.

taw55 9 years ago | |

I think he means that

A pixel is not a little square: http://alvyray.com/Memos/CG/Microsoft/6_pixel.pdf

anmorgan 9 years ago | | |

Fair enough, his description seems misleading. To me a pixel is a discrete RGB value, which is made up of physical components, for example:

https://google.com/search?tbm=isch&q=close+up+of+lcd+screen

https://google.com/search?tbm=isch&q=stack+up+of+lcd+screen

Gracana 9 years ago | |

Where / in what way is it implied that pixels don't have size? What is "redefined"? I think the article explained the concepts very well.

anmorgan 9 years ago | | |

From the article:

"Asking someone what the size of a pixel is is a good way to confuse him or her because it’s a trick question. A pixel has no size, no physical value or meaning outside of its mathematical representation. It is a part of a relationship between the physical screen size, expressed in inches, the screen resolution, expressed in pixel per inches and the pixel screen size, expressed in pixels. Laying it all out, it looks like this:"

"As you might have noticed in my explanations, “Resolution” stands for PPI, in this case “109” but not “2560x1440”, like you might commonly see everywhere on the web."

enra 9 years ago |

There is no date on this post, but few details point this to be bit outdated.

Lot of mobile assets are now svg (Android), pdf (iOS) or programmatically created. Most of the time if you design in Sketch, you don't really need to worry about the pixels since all the assets are in vectors. You can just spec everything in pt and export the assets in svg or in the desired 2,3x, whatver-x as needed.

rovr138 9 years ago | |

https://hn.algolia.com/?query=designers%20guide%20to%20dpi&s...

Seems the oldest submission is at least 3 years old.