Silverlight v3 ClearType Font Rendering – A comparison

July 14th, 2009 by Colin Eberhardt

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 spacer spacer
Silverlight v3.0
(ClearType on)		 spacer spacer
WPF
(ClearType off)		 spacer spacer
WPF
(ClearType on)		 spacer spacer
WinForms
(ClearType off)		 spacer spacer
WinForms
(ClearType on)		 spacer spacer

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

This entry was posted on Tuesday, July 14th, 2009 at 4:10 pm and is filed under Uncategorized. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

14 Responses to “Silverlight v3 ClearType Font Rendering – A comparison”

  1. Using built-in, embedded and streamed fonts in Silverlight | Gergely on .NET says:
    July 20, 2010 at 4:12 pm

    [...] Related post: Silverlight v3 ClearType Font Rendering – A comparison [...]

    Reply
  2. spacer Alexander Trefz says:
    December 21, 2009 at 8:22 pm

    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.

    Reply
  3. FlexibleFactory » Blog Archive » Silverlight 3 font rendering not quite there yet says:
    July 27, 2009 at 2:28 am

    [...] 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. [...]

    Reply
  4. spacer herzmeister der welten says:
    July 24, 2009 at 10:58 am

    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.

    Reply
  5. spacer Bart Czernicki says:
    July 17, 2009 at 11:29 pm

    Any word on performance with ClearType off/on. Does it benefit from GPU acceleration?

    Reply
  6. spacer Joe says:
    July 17, 2009 at 2:23 am

    Looks like WPF is using a deeper bold than GDI+, maybe try a lighter weight?

    Reply
    • spacer Colin Eberhardt says:
      July 17, 2009 at 1:00 pm

      @Joe,

      Good point, however I tried a FontWeights of DemiBold and Medium, however they all looked exactly the same.

      Regards, Colin E.

      Reply
  7. DotNetShoutout says:
    July 17, 2009 at 12:24 am

    Silverlight v3 ClearType Font Rendering – A comparison – Colin Eberhardt’s Adventures in WPF…

    Thank you for submitting this cool story – Trackback from DotNetShoutout…

    Reply
  8. spacer Hoop says:
    July 16, 2009 at 11:30 pm

    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?

    Reply
    • spacer Colin Eberhardt says:
      July 17, 2009 at 12:59 pm

      @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.

      Reply
  9. spacer Chris Anderson says:
    July 15, 2009 at 2:34 pm

    Hi Colin

    I was going to blog the same thing but you got there first spacer . Thanks for the comparison.

    Chris

    Reply
gipoco.com is neither affiliated with the authors of this page nor responsible for its contents. This is a safe-cache copy of the original web site.