Text Legibility: Using 120 DPI Fonts on High Resolution Displays


Let’s talk about fonts. As somebody who spends far too much time in front of a computer each day, I’ve become incredibly picky about display quality, and fonts in particular. With Windows XP, ClearType, and a sufficiently high DPI display, onscreen type is now getting close to the legibility of paper.


There’s only one problem (well, several actually, but they’re related): People aren’t taking advantage of this!


It’s very unfortunate, but I run across all kinds of people running LCD displays below their native resolution. The irony is that they’re suffering reading blurry low resolution fonts because their display is so high quality (high DPI) that normal font sizes are too small to read comfortably!


The solution is to bump up the DPI setting in Windows. This recalibrates Windows to better match the actual number of dots per inch on your display, so that when an application requests a 12 point font it’s approximately 1/6th of an inch on your screen — just like it would be on paper — not 1/8th or 1/10th or even smaller.


Unlike when you reduce your resolution, when you increase the DPI there are more dots (pixels) that can be used to more precisely form the characters. This means instead of just getting bigger, the text gets more readable: O’s look round, not blocky; serif fonts have serifs; spacing and kerning improves; and bold and italic text text doesn’t turn into a muddy mess. ClearType improves these even more by taking advantage of sub-pixel rendering.


Setting your DPI



  1. Go to Display settings, click the Settings tab, and then click Advanced.
  2. Click the General tab, and read it.
  3. Choose your DPI. You can use “Custom Setting…” to view a ruler on your screen so that you can hold up a real ruler and match DPI exactly. However, a good rule of thumb is to start with 120 DPI if this is the first time you’ve tried increasing the DPI setting.
  4. OK out of the dialogs and (sigh…) reboot. Let XP update the fonts if needed.

Tweaking Font Settings


If you’re like me, 120 DPI is just a bit too big for text in standard window decorations. I tweak the Display settings further:



  1. Go to Display settings, Appearance, Effects.
  2. Turn on ClearType!  If you have a display that necessitates 120+ DPI fonts you need ClearType. Besides the obvious anti-aliasing aspects, ClearType gives fonts better weight. Without ClearType the fonts will be too thin and light, decreasing readability.
  3. Click OK, and then click the Advanced button.
  4. Bump down Icon, Menu, Message Box, Selected Items, and Tooltip by 1 pt.
  5. Reduce title bars and related controls to a sane size.
  6. Fix icon spacing and scroll bar width.

Alternatively, you can download and try my theme file..


Caveats


There are a few minor issues with running at 120 DPI or above in Windows. First, a few applications may have drawing issues or otherwise not work properly. I can’t tell you what they are because they got purged from my software library a few years back. They must not have been important (heh).


Web pages have this problem as well, particularly when they use fixed-pixel font sizes. Like bad software they quickly get eliminated from the selection of sites I visit. Fortunately this problem is a lot less common than it used to be.


The other caveat is that icons and most toolbars do not scale with the DPI setting (although dialogs do), so those may become too small to use comfortably. For people with normal vision this isn’t a problem unless you start getting into the extremely high-end displays such as IBM’s T221 or Viewsonic’s VP2290b. However, if you are having this problem I have an instant solution: send it to me. Maybe I’ll go in and fix IE’s PNG transparency support or CSS bugs if you do, but I can’t make any promises. ๐Ÿ˜‰


Finally, if you increase the DPI setting and use Office 2003 you’ll have to put up with the resampled toolbars and other UI elements:





Note that this is a PNG file, not a lossy-compressed JPEG. I talked to the Office folks about this before it shipped, and it is simply an unfortunate issue where the realities of software development (i.e. money and deadlines) meant that they couldn’t substitute higher resolution images or offer an option to turn off scaling. Ironically, scaling the images was done to better support higher DPI displays.

Comments (24)

  1. José Jeria says:

    Any chance that IE 6 will now finally allow the user to resize any web text (Like IE 5 Mac since year 2000, Mozilla, Opera and Safari) on a page?

  2. José Jeria says:

    Forgot to add the URL, read Jakon Nielsens article on the issue:

    http://www.useit.com/alertbox/20020819.html

  3. I’ve been using 1600×1200 with 120dpi fonts and cleartype for a while now (luckily my Laptop has 1600×1200 as it’s native resolution too) – I am loathe to go back to horrible 1024×768 screens now…

  4. Darrell says:

    I’m at 1400×1050 with ClearType (no 120 DPI fonts yet).

  5. Robi says:

    I have a home 1600×1200 20 inch LCD + ClearType + 120dpi. It looks amazing.

    At work however I suffer in 96dpi hell. that’s because I use VSNET. VSNET will do bizarre things if you run at 120dpi and try to edit a WinForms dialog someone created at 96dpi. I had to give up and run at 96dpi like everyone else on my team.

    Please beg your VSNET colleagues to fix this!

  6. Andrew Babiec says:

    I have a DELL Lattitude D800 with a 15.4" widescreen lcd. The problem is that the native resolution is 1920×1200. Of course, 120dpi was turned on by default.

    Why I turned it back to 96dpi:

    – Graphics (like the google homepage image) & certain clipart look slightly distorted (seems to be mostly round/oval shapes). On the other hand, jpegs from my camera look ok.

    – Icons in the taskbar (both quicklaunch and the tray) and start menu look pixelated.

    – Some dialog boxes on old apps don’t work as well. For example, on one install wizard, the OK button was out of reach, and the dialog couldn’t be resized.

    – I use a 17" LCD monitor at work connected to my laptop. I’m able to also use my laptop lcd at the same time, effectively getting a multiple monitor setup. The only downside is that I either drop the laptop to the 1280×1024 resolution of the monitor (which widens everything on my laptop) or leave it on 1900 and suffer the small text. I can compromise and set it to some resolutions in between those two values, but since it isn’t the native res, everything is still a little "fatter". 120 dpi would be great here, but I have to do it for both screens or none.

    I know that in order to really do multi-monitor setups, you need 2 monitors with the same size & resolution next to each other, but the current set-up is so useful at times, I’m loathe to give it up.

    One question: I just tried 120dpi again – why did Windows re-arrange the icons on my desktop after the required reboot? Arrgghh…

  7. Julien Ellie says:

    Robi: Don’t quote me on this, but I think we fixed this for whidbey and made a hotfix for Vs.Net 2003. If you contact me (see me blog) I can try and track down the KB entry that references this for you. (as usual this post is provided as is)

  8. Andrew, regarding your list:

    1) I can’t imagine why graphics would be distorted, unless it’s simply an aspect ratio problem with the resolution not properly matching the dimensions of the screen, or a utility Dell installed.

    2) Download my style. If you set the window title text sizes right they’re still plenty big and you won’t get any distortion.

    3) This has become very rare. As I stated, I throw out apps with this problem. ๐Ÿ™‚

    4) Yeah, there is no per-screen DPI setting. It might be possible for a video driver to do this, but I’m not aware of any that do. Maybe in Longhorn…

  9. José, regarding IE zooming any web text, I have been pushing for this but I can’t comment on when we might see it happen.

    There is a way to hack it in today:

    1) Create a local html file that has the following script:

    <script language="JavaScript">

    external.menuArguments.document.body.style.zoom="200%";

    </script>

    2) Add it to the right-click menu in IE, by adding a registry key:

    Key: "HKCUSOFTWAREMicrosoftInternet ExplorerMenuExtZoom 200%"

    Value (Default): "c:webzoom200.htm"

    Adjust the zoom % and file locations as needed and then restart IE. Now when you right click on a page the menu should have a new option to โ€œZoom 200%โ€. Clicking on that will zoom the entire page, but keeping the fonts smooth. If anybody wants to write an IE toolbar that does this, but better, be my guest; it should be easy.

    Unfortunately zoom has a few issues with font kerning/spacing, selection, controls, and an overall lack of polish, which is why you donโ€™t see this exposed in the UI today.

  10. .ERN says:

    Great tip for improving legibility of fonts

  11. .ERN says:

    Great tip for improving legibility of fonts

  12. Harry says:

    Thanks for the great info! This seems to be the only page I have found with information reguarding the issue I’ve been dealing with. I too have a dell laptop (inspiron 8600) with the ati mobility radeon 9600 and WUXGA, 1920×1200. It shipped set at 120 dpi, but I seem to have to set it back to 96 dpi due to web sites that seem to draw very slow. Now I know its because of the fixed font size. Thanks a lot for the info!

  13. Omar Shahine says:

    I just found this gem on MSDN:

    http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/overview/highdpi.asp

    You need to add a regkey to IE to turn this on.

  14. rebus says:

    Great page and discussion. Let me up the ante: I have a Samsung Syncmaster 243T, which is a 24" unit, and have had to crank up to 200 DPI.

    This, of course, creates other problems I haven’t yet figured out a solution to, especially in surfing the web.

    I’m using Liquid Surf, which has the ability change fonts on-the-fly, but almost every page now requires an adjustment. IT works great — the pages don’t.

    Has anyone experimented with a 24" widescreen monitor and have any suggestions.

    By the way, the Pivot rotational software allows me to goggle between portrait/vertical and landscape/horizontal. I now see *much* more of most screens, which is great. But now the probem is adjusting each web site’s frame size. Any suggestions for that?

  15. rebus, sounds like a good monitor. ๐Ÿ™‚

    If you haven’t read them already, some of the other posts and links has some suggestions for IE, although Liquid Surf may already expose all of that.

    Beyond that, others may have ideas.

  16. nicco says:

    These advices doesn’t really help me. Like harry above I have an dell inspiron with 1920×1200 native resolution. But cleartype is distorting Shapes like "S" in the Middle. CT tuning didn’t help me. there are some fonts that looks better than others, but I do have Suse Linux 9.1 installed, and the x11 display server with antialiasis and subpixel looks about 200% better and really paperprint smooth. I am sorry to inform you that windows xp is a very old os system now developped primarily for small 96dpi displays. Its lacking scalability for big screens.

  17. Nicco, I have not seen the distortion you are talking about, but I’m always interested in seeing how others do it. See my other entry:

    http://blogs.msdn.com/tonyschr/archive/2004/04/28/121908.aspx

    Can you post a screenshot for Suse Linux based on the HTML I provided? Feel free to change the fonts.

  18. Antonio says:

    I had to jump up to 120 dpi b/c 96dpi was way to small with my sxga 14.1 screen (should have gone with xga). Anyways icons on my taskbar , quicklaunch and submenus where very pixelated, i reduced the caption buttons item and the icons became sharp by reducing in size. I still have the TURN OFF COMPUTER Red Square pixelated as well as the Log Off button pixelated…any solutions to this?

  19. Antonio, nope – as far as I know there’s no way to fix the pixelated "Log Off" and "Turn Off Computer" buttons.

  20. Alexei Zakharov says:

    Why do you need to adjust the default theme after switching to 120dpi fonts? Unfortunately it means only one thing: the default theme at 120dpi is ugly. You have to fix it. It should not require reducing the size of menu font, the scrollbar, the window title and so on. Everything should look OK by default as it is now with the default theme at 96dpi. Otherwise the majority of users will try it, find it unacceptable, and switch back. Or worse, users will resort to reducing resolution of LCD monitors and have everything blurry. That’s exactly what you state at the beginning of this blog entry.

    We should have better experience in Longhorn.

  21. Alexei, I completely agree the default experience needs to be better. There are several issues here:

    1) On my displays, I consider certain fonts, such as menus and icons, to be 1pt too big. This is very subjective, based on display hardware and how fonts render at certain sizes, so it’s not as easy to provide a "better" default. IMHO the answer is to make tuning these things easier, with more immediate feedback.

    2) Some part of the UI (tray, quick launch) look ugly because of resampling problems. Window titles seem to be egregiously oversized. I consider these bugs.

    3) Not everything reacts well to DPI settings. These are bugs too, and I have a low tolerance for this type of software (especially when it breaks outright, not just little glitches). For example, 3D is a hobby of mine and I’d like to try their free (EXP) version of Softimage|XSI, one of the top high-end 3D apps. However, it requires Windows to be set to 96 DPI. It was a big download, but… DELETED! Who knows, I might have liked it and paid big bucks for the full version like I did with Lightwave. They lost a potential customer.

  22. Roel De Nijs says:

    I’ve got an application written with VB6 and when i run it on Win2000 the GUI looks fine, but when it is ran under WinXP (and under the same display configuration) there are problems with some buttons (you can just see half of it) and other controls.

    Has someone got a solution for this?

  23. Thomas Roth says:

    Graphics on my Dell is also distortet.

    I have to sst the key

    [HKEY_CURRENT_USERSoftwareMicrosoftInternet ExplorerMain]

    "UseHR"=dword:00000001 <—0 GIFs no more distortet

    to 0.

    Thomas

Skip to main content