Why does a High DPI Setting Make My Application Look Fuzzy and Have Clipped Text?

  • Article

If you increase your DPI setting in Windows 7 (or Vista), you may notice your application doesn’t look the way you intended.

What’s the Big Deal?

You may say, “Nobody changes the default DPI, right?” Well, Windows 7 might. Windows 7 may increase the default DPI setting based on the resolution the video card supports.  The default DPI decision occurs when you do a clean install.  Over time as people buy newer machines supporting higher resolution, you will see a trend of users running at a higher DPI.

Why is Making Your Application DPI Aware Important?

As display resolution increases, stuff on the screen gets smaller. When the text is too small to read, people tend to  reduce the resolution. By reducing the resolution, you are relying on the monitor to do the scaling and the desktop can looked stretched or blurry.  Also, ClearType will only work at native (recommended) resolution.

So, how do you get all the readability benefits of font smoothing and still have bigger text? You increase the DPI.

Can this Affect my Application?

In most cases, applications are designed for the default of 96 DPI. As you increase the DPI, your application appears to get smaller.  If your application doesn’t declare that it is high DPI aware, Windows 7 Desktop Windows Manager (DWM) will scale it to make it look bigger at a DPI setting of 144 DPI (150%) or greater.

Blurry UI (Pixilation)

Blurry UI occurs when DWM scales an application window. Here’s an example of an application designed for 96 DPI and doesn’t declare DPI awareness.  This is what the application looks like with a setting of 144 DPI (150%). Notice the text in the title bar is clear but the text in the application is blurry.

144 DPI fuzzy

Here’s another sample app that shows a bunch of bitmaps which are designed for different DPI settings.  However, the application does not set DPI awareness and everything looks kind of blurry including the larger bitmaps because the whole window is being scaled by DWM at 144 DPI.

144 DPI bmp

Clipped UI

Another very common problem when you increase the DPI is clipped text.  This happens because the application has code to size windows and assumes 96 DPI.  Here’s the demo app at a setting of 120 DPI (125%). Notice that the text in the window and buttons are clipped.

120 DPI clip 

How do I Fix It?

Before you fix it, you need to find it.  The DPI setting can be found in Control Panel\Appearance and Personalization\Display. You should test your application at a DPI setting of 125% looking for clipped UI. You should also test at a DPI setting of 150% to see if DWM scaling is acceptable. The good news is DPI testing on Windows 7 is much easier.  You can now change the DPI and it only requires a log off/on instead of a restart. Also, DPI settings are now per user rather than per machine.  I usually create additional users with different DPI settings on my machine for testing.  When I want to test at a different DPI setting, I just log in / switch to a different user. As a bonus, you can test multi-user as well. :-)

Guidance

The best guidance for designing high DPI aware applications can be found in the High DPI section of MSDN. This documentation has lots of info on how to fix high DPI issues in applications.  I’ll cover the common topics I mentioned in this post but please refer to the documentation for a complete list.

Fuzzy UI

Fuzzy UI is caused by DWM scaling. So, you need handle the scaling yourself (see the MSDN info mentioned above) and then tell the OS your application is high DPI aware.  This can be done with an API but the preferred method on Windows 7 or greater is to declare DPI awareness in the application manifest.

You can see what affect setting DPI awareness will have on your application by using a compatibility setting for the application. In the executable properties, under the compatibility tab, check the “Disable display scaling on high DPI settings” option.

image

Now when you run the application, DPI scaling will be disabled for the application. Note that the compatibility property is just a mitigation for legacy applications.  Ideally, you need to be declaring your application as DPI aware in the manifest.

Here’s our sample application again with the <dpiAware>true</dpiAware> element in the manifest:

 144 DPI bmp no scaling

Note that the text and most of the icons are no longer fuzzy.  However, there are still some problems. The Windows Media Player bmp doesn’t fill the button.  To fix this, you would need to detect the DPI and place the appropriate sized bmp in the button.  The 20x20 bmp in the 30x30 box is also fuzzy.  This is because the application is doing the scaling.  This would happen on any DPI setting. I threw this in to the app to show you may have other scaling issues that aren’t related to DPI.  Also note that it’s usually better to scale down a bigger bmp into a smaller box as you can see in the final icon.

Clipped Text

Clipped text is caused by incorrectly calculating the size of a window.  Basically, you need to be sure you are scaling your UI based on relative pixel size.  There are helper functions to do this in the CDPI class.  Please refer to the step by step tutorial in MSDN which is based on the High DPI Demo App that I’m using for this blog post.

Final Thoughts

In the labs, when we test a native application at a high DPI setting, we usually find at least one issue.  Sometimes they are minor, sometimes they are not.  We see a lot fewer issues in managed code.  However, some controls aren’t very high DPI friendly.  Regardless, DPI testing is worthwhile.  It’s better to discover the problem before your customer.