WPF: Blurry Text Rendering
This is something that’s been nibbling away at me since I first started using Windows Presentation Foundation, but I kept dismissing it as a figment of my imagination. Take a look at the picture below:
The screenshot shows two windows - the one at the top using Windows Presentation Foundation, and the one at the bottom using Windows Forms. Don’t be confused by the classic Windows theme - this screenshot was taken on Windows Vista RC1 (with .NET 3.0 RC1). ClearType in Windows is turned on. Both applications are using the Segoe UI font, at 9pt. My DPI setting is set at 96.
You may find it hard to tell the difference at first, but if you spend a second or two looking at the image you’ll notice that the Windows Presentation Foundation one is noticeably “blurrier”. The colour looks a little different, almost as if it was a JPEG rendering artefact - but the image above is a 24 color bitmap.
Need convincing? Let me zoom in:
In the picture below I’ve cropped the two blocks of text to place them side by side. You can tell that the aliasing is quite different. Also, due to WPF’s device independent nature, some of the letters seem to have been “bumped” so that they are closer together:
Now perhaps I’m nitpicking, and no one is going to notice the difference. But compare the following blocks of text:
The top one is noticeably harder to read, and I feel like I need to squint to be able to read it.
The problem is that, as the post below on MSDN explains, WPF uses it’s own anti-aliasing technology to handle font smoothing rather than the built-in Windows Vista smoothing:
http://forums.microsoft.com/MSDN/ShowPost.aspx?PostID=565101&SiteID=1
For people like Bill McCarthy, who don’t use font smoothing (or at least didn’t seem to be in that post), they’ll be even more annoyed - WPF’s font anti-aliasing can’t be turned off no matter what your ClearType setting is.
This is going to have a number of repercussions:
- Applications that rely on showing large amounts of text in WPF, or even small amounts, are going to be hard to read.
- People are going to be able to tell something is a WPF application not because of the great graphics, but because it’s blurry.
- Older monitors/cards that don’t look good with ClearType (any older CRT, for example) are going to look terrible.
What irks me the most is that the thread I linked to above was posted in March 2006, but the only reply from Microsoft was in October 2006 to say “it’s too late in the release cycle”. For a platform that’s supposed to be “the next big thing” in graphics technology, and has otherwise been such a great leap forward, making fonts look so poor and difficult to read is a real killer.
Now, I have to say I haven’t tested this on the RTM version of WPF (I’m hanging out for Vista to appear on MSDN subscriber downloads), but given that they had no plans to change anything in October I don’t imagine it will have been fixed. I’d love to be told otherwise.
Can you tell the difference in the pictures above?
Filed under: WPF
Most definitely, the lower picture, Windows Forms is much, much clearer/sharper and easier to read than the WPF version.
Your last pictures, with the bigger block of text is the clearest to show the difference. Like you, I feel like I need to squint (or see an optician) to read the top one.
“WPF’s font anti-aliasing can’t be turned off no matter what your ClearType setting is.”
That’s lame.
My screen-reader can’t tell the difference.
I’ve had a similar experience, but divided in two…
1) I’ve been trying to develop a .NET app in 1.1 and forcing my controls to use ClearType. Of course the RichTextControl doesn’t support such things so we’ve had to reprogram it all from scratch, but with no _real_ benefit to the users (try and justify that to your manager - erm, it looks pretty?). The problem is that users want selectable text - they’ve been inculcated to it with the web… so how to emulate it without web-ifying your app (to it’s detriment).
2) Even more annoying today I was asked to knock up a quick page to be displayed on a large screen in our office. So wrote a bit of ASP and used a bit of CSS to produce an adequate looking page. All was good but IE7 was complaining about Intranet settings and security so I (stupidly, in retrospect) clicked the button to allow IE to “fix things”. The result was that ClearType disappeared for this page and my 2em font size looked like it was rendered on a ZX Spectrum. Boss not happy. How to turn it off I can’t fathom so my only recourse is it to copy an existing page which works and import my code into it. Why this works I have no idea and frankly I’m so pissed off I might just install Firefox on the box to piss off the IT department. C’min M’soft, get it right! (seems strange as I’ve just written a blog post about how we should be thankful of the Seattle giant, but for all their good they still manage to get my goat).
CRT users who are bothered when they sit in front of a monitor set to 60MHz will notice something is just “off” with Vista RTM when it comes to menus and the way fonts look at certain times.
On my 19″ Trinitron I just can’t get 100% comfortable no matter what I set regarding cleartype. LCD users will of course love the way Vista looks.
I also tried playing around with DPI. Going to 120dpi and bumping up the resolution makes for a beautiful desktop, wonderful icons, a gorgeous start menu, and wait for it….a HORRIBLE browsing experience. Go ahead try and zoom(watch as the text gets jumbled together on website menus) try the old View->Text Larger, Largest(the sites will just ignore requests and laugh at you).
Yep, if your a CRT user and your a bit picky about fonts you may just want to stick with XP.
I had a similar experience after downloading IE7 - You can use the control panel applet to tune the cleartype settings for your monitor
http://www.microsoft.com/typography/ClearTypePowerToy.mspx
I have a ViewSonic G70fmb and in Vista x64 RC1 the display is pristine. No blurriness (with ClearType on), at 1280×1024x32 using a GeForce 6600GT 128MB PCI-Express board. I have Vista Ultimate in possession but not installed yet….
I noticed the font differences as well on my Windows XP machine. It’s especially bad on my digital screens.
WPF uses a new version of ClearType which utilizes sub-pixel positioning. This is different than the compatible or natural widths ClearType available in GDI and WinForms in that glyphs can begin in the middle of a pixel (i.e. on the ‘g’ or ‘b’ stripe) as opposed to just the start of each pixel. This provides an improvement in interglyph spacing (a key aspect of typography and readability) at the expense of some loss in contrast. Some folks have eyes that are more sensitive to this loss than others. We’ve provided the ability to tune ClearType to better suit users eyes and screens (including color level and contrast). Currently they’re only exposed via registry key. We’ve not had a chance yet to rev the ClearType tuner power toy to leverage these. But if you’re a power user and don’t mind using regedit, you can set them manually. Here’s more info on the keys:
http://msdn2.microsoft.com/en-us/aa970267.aspx
For general tips of getting a better WPF ClearType experience see this blog entry:
http://blogs.msdn.com/text/comments/840267.aspx
I find the text rendering in WPF maddening, particularly the strange anti-aliasing adjustment after text scrolls. I’m surprised that there hasn’t been more discussion of this issue. Maybe not many people have been working on WPF apps where text rendering is key?
First thing I noticed after installing Vs 2008 Beta 2. Was building my first WPF “Hello World” app and thought I was reading one of these T-Shirts that play with your vision that they sell at the gag shops at the mall. Did a google search on “Blurry WPF Text” which lead me here.
I started to build WPF apps and pretty much had to revert to WinForms. I am very disappointed with this as I develop apps that require small text. I do fully understand why this is so and I’ve pretty much lost hope that WPF will change and contrast will now always be sacrificed for spacing accuracy.
I’m now building apps so that I can plug in either WinForm or WPF UI’s.
Fascinating (and disturbing/disappointing). I can’t believe Microsoft - who I always thought were so big on user experience - would ignore one of the most basic and simple components of the user experience i.e. being able to see clearly what you’re trying to read! Why do people go out and buy reading glasses if it’s not because they prefer to see text more clearly.
[…] window had custom chrome, and all of the buttons were custom drawn. It didn’t look like WPF (I could read the text), so I’m guessing it involved a lot of custom GDI/GDI+ […]
[…] Microsoft can resolve the Blurry Font issue in this timeframe as […]
WPF is great and I’d wanted to write some apps but this cleartype font just sucks,
I can’t stand it, I hate cleartype but I love freedom and it would be great if I by myself could decide if I want to use it or not
unbeliveble that one can’t just disable it, wpf is so cool and it lacks such a basic option… that’s realy sad
ok, now I’m going to check if this stupid black or gray background in blend etc can be changed to my favourite colors
Try placing an image with a small png/gif 16×16 icon, it will be blurred and there is NOTHING you can do about it!
Seriously, blurring bitmap images? The only advice Microsoft gave on the MSDN forums was to redevelop your bitmaps as vectors, can you believe that?!
I am agree with you guys. Microsoft need to change a lot of things. The blurry text is not the only problem from WPF. The images are blurry too, the ListView in gridview mode, the BitmapEffect is to slow because use software processing.
Did you belive that an BitmapEffect is regenerated (another Bitmap is processed) when you only change the UIElement location. This is not needed, just render the UIElement at the new location with the old Bitmap.
The only reason I stoped using WPF is because it hurt my eyes to read the font. I don’t know if being colorblind makes the experience any better or worse but they might want to consider actually listening to the users let alone the developers.
I agree that WPF fonts are horrible. One trick I learned was to try different fonts at different sizes. There is an incredible difference depending on the font that is used. The best fonts i’ve found are Myraid Pro and Kozuka Gothic Pro. I would recommend 12.6px or higher though. Yes they are big, but the visibility is dramatically improved over fonts like Calibri. I hope this helps. I found these by using a WPF font viewer and tried 100 or so fonts.
Sorry I spelled that wrong… It’s Myriad Pro.
I think this is make or break for WPF.
The MS engineers need to add the possibility for developers to exert pixel-perfect control over all UI elements, including text, bitmaps and other types of graphics.
If they do not add this (and in a good way) then WPF will not float.
Auto-anti-aliased vector rendering is only good for a very small subset of the applications which people are likely to make, such as games and simple brochure-applications. For all other applications, pixel-perfect control of on-screen rendering is key.
Friends,
I made a simple ScaleTransform animation in Silverlight and WPF
check out the strange anti-aliasing adjustment (text) at the end of animation in the WPF sample. but it work perfectly under silverlight.
Silverlight online demo (work as expected)
http://www.kingkeg.com/temp1/TestPage.html
WFP Xbap online demo (not render text perfectly)
http://www.kingkeg.com/temp1/WpfBrowserApplication1.xbap
here is the code (WFP Xbap version)
private void Button_Click(object sender, RoutedEventArgs e)
{
DoubleAnimation da = new DoubleAnimation();
da.Duration = TimeSpan.FromSeconds(0.9);
da.From = 0;
da.To = 1; ScaleTransform st = new ScaleTransform();
Wrapper.RenderTransform = st;
this.RegisterName(”st”, st); Storyboard sb = new Storyboard();
sb.Children.Add(da); Storyboard.SetTargetName(da, “st”);
Storyboard.SetTargetProperty(da, new PropertyPath(”ScaleX”));
sb.Begin(this);
}
any fix ?
THANKS
ACHU
Microsoft has known about the text issues for years and have done nothing about this.
I suspect that internally MS believed their ‘evagelists’ that by now we would all be using >200dpi LCD screens (and if we were then WPF’s approach to text rendering would deliver good results).
Not sure why nobody gets it that people don’t care about high DPI on their screen so they wont pay for it - that’s why most screens out there are still 96dpi.
Doesn’t look like they are serious about fixing this. Maybe a case of too many egos not wanting to even allow the option to render small fonts the ‘old fashined way’…