Hacker News new | past | comments | ask | show | jobs | submit login

Author of the article here.

If you read the closing paragraphs of the article, you will see that I do talk about the physical size of the final representation of the pixel-based icon. However, just because you can use more pixels on higher-resolution displays, it does not mean that you can just take a highly detailed vector artwork and display it.

Being able to display very intricate details for each icon is not necessarily the end goal. The end goal is to preserve the clarity, which is why smaller icons (physically, not pixelwise) should have smaller amount of detail compared to larger ones.

In your example, a 128x128px icon that occupies the same physical size on an extra-high DPI screen as a 16x16px icon on a lower-end screen can (mathematically) have 8 times as much detail along each axis. Just because this is possible to do without losing the signal quality on the level of individual pixels, does not mean that it is desirable from the UX / UI perspective.




You're right that in a world with varying pixel densities, it's not enough to just design an icon for a given pixel size. But physical size isn't the right design target either. An icon designed for a given physical size on a display close to the user's eyes won't work if the display is much further away.

So when you go from thinking about pixel size to thinking about physical size, you're going in the right direction, but you're not going far enough. The relevant metric is more like "the angle subtended at the user's eyes", kinda like how the "CSS pixel" unit works.

Now, given that it's almost impossible for software on the device to know how far away the user is, trying to design up front for that metric (angle subtended by the icon) is also almost impossible.

And even if you did know both the pixel density and the distance to the display, that still doesn't take into account the fact that users will vary in their visual acuity. The right design choice for a 20-year-old user holding the display close to their face is going to be dramatically different from the right choice for a 70-year-old holding the display at arms length.

You can't really design well for all those possibilities up front. The right answer has to involve allowing the user to adjust the "zoom level" to their liking. And that level of flexibility means that automated approaches (possibly something like freetype's autohinting, extended to work in color) are probably going to be a better approach than manual pixel tweaking.


This is actually a good reason to move away from pixel designs and towards vector graphics. An assumption made now is that there is one or maybe two resolutions at which a 128x128 icon is displayed, and this is true for iOS screens. But with a more heterogenous selection of screen resolutions and expected screen distances, the actual display size of a 128x128 icon is basically unknown.

There are two problems you are conflating. One is that low-resolution icons have visual artifacts, and therefore manual pixel hinting is valuable. In general though, this problem only crops up for very small icons, say smaller than 32x32. But as screen resolutions increase, this problem will get easier.

The other problem is that at small sizes, we want icons to be less detailed and therefore more recognizable. A quarter-inch icon two feet from the eyes should have very little detail. This is a problem that vector graphics are very suited for. One can specify a low-detail icon that should be used when the real size of the icon is below some threshold, no matter whether that screen space is 64x64 or 20x20. In a world where the screen resolution of an icon that size can vary by more than a factor of two, using pixels is the wrong approach.




Guidelines | FAQ | Support | API | Security | Lists | Bookmarklet | Legal | Apply to YC | Contact

Search: