Text rendering has been a problem for both Silverlight and WPF for a while. This blog post looks at ClearType in Silverlight v3 and compares it to WPF and WinForms text rendering.
Text clarity is something that concerns me quite a bit. In financial applications, such as our market overview pages, often large quantities of both graphical and textual data are rendered to the screen. Users of these applications need to be able to rapidly digest information, hence clarity is very important.
I was very happy to see that text rendering in Silverlight has been improved by the introduction use of the ClearType sub-pixel rendering algorithm. The following table contrasts the same Tahoma text rendering using Silverlight, WPF and WinForms in order to compare the text clarity.
| To scale | Zoom x4 | |
| Silverlight v2.0 |  |
 |
| Silverlight v3.0 (ClearType on) |
 |
 |
| WPF (ClearType off) |
 |
 |
| WPF (ClearType on) |
 |
 |
| WinForms (ClearType off) |
 |
 |
| WinForms (ClearType on) |
 |
 |
From the above table you can see the tell-tale colour-halos around text in Silverlight v3.0 indicating that ClearType rendering is being used. Previously Silverlight used the same anti-aliasing approach used by WPF.
The text rendering of WPF has been criticised quite a bit. The main problem is that text glyphs are not snapping to pixel boundaries, which results in some rather unpleasant artefacts when text is animated. However, the good news is that this will be fixed in .NET 4.0.
The addition of ClearType text rendering in Silverlight v3.0 is certainly good news. However, if you compare the images above, I still find that the WinForms ClearType rendered text is clearer that its WPF / Silverlight counterparts. If you inspect the word ‘bold’ which is rendered in white text on a blue background, the WinForms text is much clearer. The WPF / Silverlight fonts appear much ‘fatter’ with less space between the letters. All the above applications used exactly the same font (Tahoma) and the same font size.
Regards, Colin E.
Tags: News, silverlight, WPF
[...] Related post: Silverlight v3 ClearType Font Rendering – A comparison [...]
using Tahoma isnt rly usefull, check the Quality with a Cleartype Font would be much better(Calibri, Corbel, Consolas….)
@Bart Cleartype is on per default and AFAIK u cant diable it.
[...] I must now point out that while this is true, after looking at a few samples today, as well as this font rendering comparison, the quality of rendering is not on a par with the standard Windows Cleartype that we are used to. [...]
guess WinForms is best because WinForms/GDI+ render to device pixels, why WPF/Silverlight conceptually have to render to a layer which is device agnostic.
Any word on performance with ClearType off/on. Does it benefit from GPU acceleration?
Looks like WPF is using a deeper bold than GDI+, maybe try a lighter weight?
@Joe,
Good point, however I tried a FontWeights of DemiBold and Medium, however they all looked exactly the same.
Regards, Colin E.
Silverlight v3 ClearType Font Rendering – A comparison – Colin Eberhardt’s Adventures in WPF…
Thank you for submitting this cool story – Trackback from DotNetShoutout…
What font is being used above?
Is this really a Winforms Vs WPF issue or a GDI vs WPF vs DirectWrite issue? Does WPF 4.0 use DirectWrite to render text? If not, do you have examplse of what DirectWrite rendering looks like?
@Hoop,
All applications are using Tahoma, which was selected because it is the default font for WPF / Silverlight applications (On an XP development machine at least!)
Also, I agree that this might be a “GDI vs WPF vs DirectWrite” issue, however with WPF you cannot change the way text is rendered, so this becomes a WPF issue!
Colin E.
Hi Colin
I was going to blog the same thing but you got there first
. Thanks for the comparison.
Chris
Sorry Chris
Still, Winforms font is slightly better.
Hi John,
So it is not just me who thinks that, thanks for letting me know
Colin E.