Scott Hanselman

WPF and Text Blurriness, now with complete Clarity

March 9, '10 Comments [25] Posted in VS2010 | Windows Client | WPF
Sponsored By

shanselman - Evernote The #1 complaint I hear about WPF (Windows Presentation Foundation) is that many fonts end up looking "blurry." It's a darned shame because really great applications like Evernote get criticized because of this one issue*.

The blurriness happens on .NET 3.5 and below because WPF's graphics system is "device independent" so rendering happens independent of resolution. It makes apps DPI-aware for free and scales them nicely. Unfortunately MOST people are running on 96dpi screens and that's where you'd expect clarity. You can get around this 90% of the time today using SnapsToDevicePixels when appropriate, but it wasn't automatic and it's subtle.

The good news is that with .NET 4 this is totally fixed. You can see with with the .NET 4 RC (Release Candidate) and VS2010, which uses WPF for much of its own rendering. Additionally, a check-in in a recent milestone makes things even clearer with light text on a dark background.

From the WPF Text Blog:

"With this fixed, WPF is not technically pixel perfect with GDI text rendering, but the difference is indiscernible to the naked eye."

So how indiscernible?

UPDATE: A little confusion about this in the comments. Folks feel very strongly about this stuff, understandably. Just like color blindness, some people are sensitive to this stuff and others "can't see it." One person in the blogs didn't like go for "indiscernible" and showed a screenshot. Here's the deal. If you are running VS2010 RC, you don't have this fix. This will be in the RTM. Here's a 100% screenshot, followed by the zoomed in version. The takeaway is this. If you didn't like the rendering before, you will now. This is/was some subtle stuff, but it's indiscernible in the RTM, so be happy! I took the screenshot from a daily build, not the actual RTM, which hasn't happened yet.

image

Blown up:

image

Click on these side-by-side images from the WPF Text Blog to enlarge and compare. VS2008 with GDI rendering is on the left and VS2010 (a post RC-build) with this fix is on the right. Of course, the release of .NET 4 will have this fix.

White Background Dark Background

In the comments on the WPF Text Blog, Rick Brewster, the author of Paint.NET suggests that we can really analyze these images using an XOR in Paint.NET.

I've done just that here, taking the dark text on a white background and XORing it. Then, for visibility, I've inverted the result. This shows just the differences in pixels between the two rendering paths. Can't see much? That's the point.

XOR and Inverted Text between the GDI and WPF rendering paths in VS2010 and .NET 4 WPF

To quote from the WPF Blog comments: "If you can’t tell a difference between the screenshots of VS2008 and VS2010, then you should not be able to tell the difference between GDI and another WPF app."

Also, note that this applies to all WPF apps on .NET 4. It's a general fix that's not VS2010 specific. Enjoy. I'll be happy when this is out and everyone's using it, including my favorite WPF app, Evernote.

* I don't know anyone at Evernote, I'm just a fan and I read the comments on their blog. I speak only for me on this issue.

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. I am a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by ORCS Web
Tuesday, March 09, 2010 12:37:02 PM UTC
Are those pictures taken from the Visual Studio 2010 RC or with some newer build ?

On RC light background looks good but dark background is still bad, not blurry, but text is not well shaped.
Tuesday, March 09, 2010 1:58:04 PM UTC
I know this is unrelated to the post but thought it may bring back memories. You are not the only one...
http://www.telegraph.co.uk/sport/othersports/cycling/7404062/Lance-Armstrong-almost-banned-from-racing-in-South-Africa.html
Andrew
Tuesday, March 09, 2010 2:03:57 PM UTC
On the Evernote thing, yes I am also a major fan and the blurry font kills me. Luckily Evernote is so good that I tolerate the blur for now.
Tuesday, March 09, 2010 2:05:01 PM UTC
Hi Scott,

Will the fix that was "checked into a recent milestone" be a part of the VS2010/.NET 4 release in April?

Thanks,

Eric Bergman-Terrell
Tuesday, March 09, 2010 2:05:36 PM UTC
Must say the OpenID login on my previous comment is really ugly.
Marthinus Swart
Tuesday, March 09, 2010 2:06:04 PM UTC
Tuesday, March 09, 2010 5:18:09 PM UTC
http://72.167.90.173/vs2008_vs_vs2010.png -- Indiscernible, huh?
Tuesday, March 09, 2010 6:03:19 PM UTC
O boy, good thing you told me it is poor rendering, I thought I needed glasses.
VS2010 does look clearer, not by much but I don't have to strain my eyes telling them to focus correctly all the time.
ivan_
Tuesday, March 09, 2010 6:29:02 PM UTC
Eric - Yes, this is new and will be in the RTM.

Google Icon Guy - You don't have the fix, you're running the RC. This was checked in last week. However, what font are you using? Send me your font and theme and I'll talk to the team.
Tuesday, March 09, 2010 6:35:52 PM UTC
Google "Indiscernible" Guy - I put those two images together overlaid and zoomed in and at a sub pixel level I'm only seeing a difference in color. The 2010 side is brighter, no?
Tuesday, March 09, 2010 6:59:42 PM UTC
Scott,

My VS2010 font and color settings were imported directly from my VS2008 .vssettings file, so the colors should be identical. However, the glyphs appear heavier in VS2010, which likely accounts for the perceived difference in color.

I've uploaded my font and VS color settings for you. The settings are exported directly out of VS2008 just in case something went screwy with the VS2010 import:
http://72.167.90.173/FontsAndColors.zip
Tuesday, March 09, 2010 7:12:30 PM UTC
Thanks, I'll test it on my newer build now.
Tuesday, March 09, 2010 7:41:34 PM UTC
What about what's more noticeable: How about the blue border in vs2010. I'm usually running windows with the old win95/win2k-look for performance reasons and the dark blue border really grabs focus away from the code. I imagine that there is some way to change theme?
Tuesday, March 09, 2010 7:54:19 PM UTC
Google "Indiscernible" Guy - Confirmed, even though *I* can't really see what you're seeing, apparently some people are very sensitive to the color fringing on high frequency edges of text. I will update the post with three examples to show you that this fix will fix your issue.
Tuesday, March 09, 2010 8:11:23 PM UTC
No disrespect, Scott, but you must be half blind :). Thanks for looking into this for me. I look forward to seeing your screenshots.
Tuesday, March 09, 2010 8:21:58 PM UTC
I've updated the post. I assure you, after seeing the details, you will be happy. Let me know. And next time, use a real name/openid. ;)
Tuesday, March 09, 2010 8:30:00 PM UTC
Can I just say...except for the quotation marks I prefer the VS2010 RC version to all of them...weird.
Ryan
Tuesday, March 09, 2010 8:43:38 PM UTC
I did use a real OpenID (I use my Google account for everything), and I specified my name, e-mail, and home page. Either it's a bug with the OpenID integration or just the Google OpenID provider. *shrug*

Anyhoo, the RTM rendering in the updated comparison looks *much* better, so I'm happy :).

Mike
Tuesday, March 09, 2010 8:58:27 PM UTC
Ya, Google Open ID sucks utterly. I'm glad you're happy. ;)
Tuesday, March 09, 2010 10:21:00 PM UTC
Great article, glad you shared this with us. I haven't had any problems with the font rendering in VS2010, but then again, I normally run it zoomed to 90%.

Evernote, huh?? How does it compare with OneNote (my benchmark for such apps).
Wednesday, March 10, 2010 9:50:30 AM UTC
Thanks for article Scott. Nice fix.
Wednesday, March 10, 2010 9:52:14 AM UTC
Thanks for article Scott, nice fix for vs2010.
Wednesday, March 10, 2010 12:53:44 PM UTC
Thank goodness. I love the concept of WPF but couldn't possibly have used it because everyone I have shown it too has disliked the rendering. I understood that MS had intended to provide sub-pixel-perfect rendering / positioning but this, in my experience, just wan't what people wanted for most text when viewed on screen. It's the same reason that some people have disliked the rendering in Silverlight when used for business apps.
Wednesday, March 10, 2010 10:41:04 PM UTC
@scott - i hope that cleartype tuning won't break RTM rendering like it did in RC.

on a clean Win 7 install with cleartype untuned I had no problem at all with 2010 RC rendering (unlike Beta 2 which was awful), but then i tuned cleartype for an exernal monitor and it went bad. i had to re-tune to the defaults when tuning cleartype - as follows:
.
Cleartype tuning 1st Screen – 1st Option out of 2
2nd Screen – 2nd Option out of 6
3rd Screen – 1st Option out of 3
4th Screen – 2nd Option out of 6

will cleartype tuning affect RTM rendering too?
simon
Friday, August 27, 2010 10:26:45 AM UTC
Pixel Fonts for Silverlight and WPF at CodePlex.com

http://pixelfonts.codeplex.com
Comments are closed.

Disclaimer: The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.