6 ms·

Designer's Guide to DPI

36 points by omarfarooq 5y ago

rudian 5y ago
This looks pretty comprehensive and saves me from writing an article I’ve had in the back of my mind for a while. One core concept: Forget about “DPI” unless you’re printing or engineering monitors. You, designer, can’t decide how many pixels go in an inch. “72DPI” is a lie.
- kevingadd 5y ago
  Screen DPI values for modern devices tend to be pretty accurate and are useful if you want to at least approximate how big a square should be on someone's screen. For accessibility purposes you really want to make sure your text is big enough.
isatty 5y ago
I thought this was about deep packet inspection. Maybe we should disambiguate acronyms in the title if there’s space.
kevingadd 5y ago
Lots of errors in this article. This for example is blatantly wrong and has been wrong for an eternity: Current OS do not scale 4K, it means that if you plug a 4K display to a Chromebook or a macbook, it will use the highest DPI asset, in this case the 200% or @2x ones, and display them at normal ratio, making everything look good but tiny. Hypothetical example: If you plug a 12" 4K screen to a computer with a 12" hi-res screen (2x), everything will appear twice as small. Windows has literally had some degree of high-DPI support since 95, and has been able to adapt to that hypothetical example for years. All of Apple's devices handle it too even if you have to coax them a bit to understand your display geometry. I really don't know what the author is trying to convey there.
- marcellus23 5y ago
  Yep. macOS only supports 1x and 2x (maybe 3x?) natively, but will happily let you render at a higher-than-native res and scale down so you can approximate intermediate UI scales. And Windows seems to natively support vector rendering, with a large offering of different UI scales -- albeit 3rd party support for this is really hit or miss in my experience.
radley 5y ago
It's good, but dated (2014).
flowerlad 5y ago
In the Windows world, sadly, things are a mess. Most new laptops including Microsoft's newest Surface Studio have fractional scaling, i.e., scaling set to a number other than 100% or 200%. As Steve Jobs said when he originally introduced retina screens on the iPhone, the only scale that looks good after 100% is 200%. Any other scale will have display artifacts. If the scale is 150% or 300% then horizontal lines on a web page will appear to have different thicknesses even when they are all actually the same thickness. This is a deal breaker for web developers and graphic artists, and for folks who just want the best looking screens. I tried the screens of the newest laptops on display at BestBuy. Even 4k screens have this rendering artifact. Microsoft's now-obsolete Surface 2 and Surface 3 screens are one of the best. They have 3000x2000 screens and the dpi is 267. Most importantly, the display scale is set to 200%. Everything looks perfect. Sadly, Surface Laptop 4 and Surface Studios no longer use this screen. Their scales are set to between 100% and 200%, which means they have the aforementioned display artifacts. That's sad because the Surface Laptop 4 is one of the best Windows laptops in terms of industrial design. Samsung Ativ Book 9 first released more than 6 years ago has 3200x1800 13 inch screens... one of the best in the industry. Sadly Samsung is no longer making Windows laptops with that DPI anymore.
- Taywee 5y ago
  300% is still integer scaling, so that should be fine.
  - flowerlad 5y ago
    I tried 13" 4K laptops on display at BestBuy, which has scale set to 300%, and I saw display artifacts.

36 points by omarfarooq 5y ago

This looks pretty comprehensive and saves me from writing an article I’ve had in the back of my mind for a while. One core concept: Forget about “DPI” unless you’re printing or engineering monitors. You, designer, can’t decide how many pixels go in an inch. “72DPI” is a lie.

kevingadd 5y ago
Screen DPI values for modern devices tend to be pretty accurate and are useful if you want to at least approximate how big a square should be on someone's screen. For accessibility purposes you really want to make sure your text is big enough.

isatty 5y ago

I thought this was about deep packet inspection. Maybe we should disambiguate acronyms in the title if there’s space.

kevingadd 5y ago

Lots of errors in this article. This for example is blatantly wrong and has been wrong for an eternity: Current OS do not scale 4K, it means that if you plug a 4K display to a Chromebook or a macbook, it will use the highest DPI asset, in this case the 200% or @2x ones, and display them at normal ratio, making everything look good but tiny. Hypothetical example: If you plug a 12" 4K screen to a computer with a 12" hi-res screen (2x), everything will appear twice as small. Windows has literally had some degree of high-DPI support since 95, and has been able to adapt to that hypothetical example for years. All of Apple's devices handle it too even if you have to coax them a bit to understand your display geometry. I really don't know what the author is trying to convey there.

marcellus23 5y ago
Yep. macOS only supports 1x and 2x (maybe 3x?) natively, but will happily let you render at a higher-than-native res and scale down so you can approximate intermediate UI scales. And Windows seems to natively support vector rendering, with a large offering of different UI scales -- albeit 3rd party support for this is really hit or miss in my experience.

radley 5y ago

It's good, but dated (2014).

flowerlad 5y ago

In the Windows world, sadly, things are a mess. Most new laptops including Microsoft's newest Surface Studio have fractional scaling, i.e., scaling set to a number other than 100% or 200%. As Steve Jobs said when he originally introduced retina screens on the iPhone, the only scale that looks good after 100% is 200%. Any other scale will have display artifacts. If the scale is 150% or 300% then horizontal lines on a web page will appear to have different thicknesses even when they are all actually the same thickness. This is a deal breaker for web developers and graphic artists, and for folks who just want the best looking screens. I tried the screens of the newest laptops on display at BestBuy. Even 4k screens have this rendering artifact. Microsoft's now-obsolete Surface 2 and Surface 3 screens are one of the best. They have 3000x2000 screens and the dpi is 267. Most importantly, the display scale is set to 200%. Everything looks perfect. Sadly, Surface Laptop 4 and Surface Studios no longer use this screen. Their scales are set to between 100% and 200%, which means they have the aforementioned display artifacts. That's sad because the Surface Laptop 4 is one of the best Windows laptops in terms of industrial design. Samsung Ativ Book 9 first released more than 6 years ago has 3200x1800 13 inch screens... one of the best in the industry. Sadly Samsung is no longer making Windows laptops with that DPI anymore.

Taywee 5y ago
300% is still integer scaling, so that should be fine.
- flowerlad 5y ago
  I tried 13" 4K laptops on display at BestBuy, which has scale set to 300%, and I saw display artifacts.