4K display technology is here, and if you haven’t seen a 4K display in-person prepare to be blown away! With products like the 32” Sharp PN-K321 4K Ultra-HD display now hitting the US market you can now experience this technology for yourself. These 4K displays aren’t inexpensive, but if your budget permits they offer an amazing picture for professional work or even entertainment.
Windows 8.1 tri-mon setup from left: Samsung 23” full-HD, Samsung 27” WQHD, Sharp PN-K321 32” Ultra-HD
While high-resolution displays are amazing they also present some practical challenges. When you increase resolution you inherently decrease the size of each pixel (assuming same display size). By decreasing the size of each pixel the content shown on the display appears smaller. When display Dots-Per-Inch (DPI) gets sufficiently dense this “shrinking effect” can make content hard to see and UI targets difficult to click/tap.
Another challenge that is presented with the introduction of ultra-high resolution displays is dealing with multi-mon configurations with non-uniform DPI values. For example if you are running two 27” displays with one at full-HD and one at WQHD the content will not appear at the same scale when an app is moved from one display to the other. This is not an ideal user experience.
With the recent proliferation of high-DPI tablets, notebooks, and external displays these high-DPI and DPI scaling issues became an important consideration for Windows 8.1.
Windows 8.1 DPI scaling improvements are primarily focused on:
- Optimizing the usability and readability of high-DPI displays
- Providing a uniform experience multi-display systems
- Empowering developers to optimize app-specific scaling based on display DPI
Optimizing for High-DPI in Windows 8.1
Sometimes facts and figures need some interpretation before they can be understood. If you’re comparing display DPI values between a phone, a tablet, and a desktop display you need to factor in viewing distance. As a quick exercise I calculated the “effective display DPI” values for my Nokia 920 phone and each of the displays in the tri-mon setup shown above. Here’s what I came up with when I calculated a “normalized 1-foot DPI value”:
It’s interesting to note that my Nokia 920 (held at 9”) has the same effective DPI as the 32” Sharp 4K display (viewed at 22”). You can’t see the pixels in either display at these distances. On Windows 7 and Windows 8 I’ve noticed that some UI is hard to see at this effective DPI. In addition to being hard to see, it can also be challenging to interact with UI when using a mouse.
In order to address these scale/DPI issues, in Window 8.1 the maximum DPI scaling value was increased from 150% to 200%. This additional scaling capability provides two distinct advantages for high-DPI displays on Windows 8.1:
- UI can scale larger which makes readability better and touch/mouse interactions easier.
- 200% scaling enables pixel-doubling for up-scaling which provides a clear and crisp appearance for images, graphics, and text.
For comparison, here’s what you would see in Windows 8 in the Display control panel under “Appearance and Personalization”:
In Windows 8.1 you can see here that DPI scaling goes up to 200%:
So on Window 8.1 your apps will run better on 4K and other high resolution displays. This is good news for anyone running ultra-high resolution displays on Windows. But what if you have a multi-mon setup?
Optimizing Multi-Mon DPI Scaling in Windows 8.1
If you are running a screen resolution of 1366×768 on a tablet, chances are that UI will look good at 100% DPI settings. But what about when you connect that tablet to an external high resolution display? In Windows 8 you can choose either 100% to optimize the UI on the tablet display or up to 150% to optimize the UI on the external display. You have to compromise.
Windows 8.1 takes care of this issue by supporting per-display DPI scaling. By default, Windows 8.1 will choose the optimum DPI scaling value for each display based on the value chosen for overall scaling in the control panel:
In order to illustrate this feature, I adjusted the screen resolution for each of the three displays connected to my Windows 8.1 preview system to exaggerate DPI scaling. This resulted in the following physical display DPI values:
- 23” display: 64 DPI
- 27” display: 81 DPI
- 32” display: 140 DPI (native)
To show you how UI scales with this demo configuration, here’s a side-by-side view of the Calculator app side-by-side on each display using 100% scaling in the control panel:
Side-by-side overlapping monitor configuration to show relative scale of UI
Relative scale of calculator app with 100% scaling on all displays (close-up)
This single scaling factor yields different physical scaling of the UI as you can see in the above photo. With only one scaling factor for all displays you have to make a compromise. With the new Windows 8.1 per-display DPI scaling turned on things look different:
Relative scale of calculator app with automatic per-display DPI scaling (close-up)
If we overlay screenshots of these calc.exe app instances, we can see how they are scaled differently at the pixel level:
This translates to a much better user experience when you are running multiple displays with non-uniform physical DPI values. This behavior is automatic for desktop apps on Windows 8.1, but there are some cases where an app will require knowledge of DPI scaling so that app-specific scaling optimizations can be implemented. Windows 8.1 has an answer for that too!
Enabling Custom DPI-Scaling for Apps in Windows 8.1
There are a lot of things apps can do to optimize the user experience for DPI scaling. If we take a photo editing app as an example, there are some very important considerations. A photo editing app may want to scale UI elements like buttons and checkboxes, but not scale other content. If we consider the image viewing area of the app it may be critically important that that portion of the UI not be scaled. If the image viewing area of the app was automatically scaled to 200% you’d never be able to see your photo at native resolution because it would be pixel doubled. This could be a problem if the reason you bought that 4K display was to see more of your images at native resolution!
Windows 8.1 provides APIs for apps to know what the optimal scaling value is. If you were developing that photo editing app, you could scale the toolbars and chrome based on the optimal scaling value and leave the image viewing area at 100% scale. Perfect!
One example of an app that responds to DPI scaling in the Windows 8.1 Preview is IE 11. IE 11 uses the API to determine the optimal zoom level and adjusts it automatically.
Here’s a side by side view of IE 11 using the automatic zoom across the 3 displays used for this article:
IE auto-zoom at 100% zoom (left), 150% zoom (middle), 300% zoom (right)
Notice how IE fills with width of the browser when maximized on each display. If we view a screenshot of all displays we can see how differently IE is scaled at a pixel level:
Screenshot showing IE at 100% zoom (left), 150% zoom (middle), 300% zoom (right)
If you are running a high resolution display or an extreme multi-mon setup Windows 8.1 has some great improvements to look forward to. I hope you’ll try it out!
*Update: There have been some questions about when per-display DPI scaling is used (different DPI scaling values per display) and I wanted to add a note here to clarify. On Windows 8.1 when you have the “Let me choose one scaling level for all my displays” check box checked (not checked by default) one uniform DPI scaling value is used for all displays. If you don’t have this checkbox checked (the default behavior), Windows 8.1 will determine the best DPI scaling value for each display and use separate DPI scaling values for each display when needed. See the screenshots in this article for more information.
Find me on twitter here: @GavinGear