WPF Font Rendering

One of the reasons I’ve been avoiding using WPF is for its difficulties in matching the look and feel of an application to the OS. When WPF first came out I opened up a Window, added some text and then tried to get it display in Tahoma, 8.25pt. After a couple of hours of hair pulling I realised that it just wasn’t going to work, so I closed that solution and haven’t touched WPF again for a few years.

Coming back to it now I find that the experience is much improved. In fact since I am running at 125% or 120dpi it actually seems to match the OS better now.

Here for example is a WinForms Form with three labels in it. At fist this looks file the simpler option, you only need to detect what OS you are running on and apply the correct font. However this is an unfair test as it uses auto-sizing controls, and while all controls resize to the contents in WPF only the label does in WinForms. Textboxes for example, require an explicit height (23px at 96dpi) and while the auto scaling options works quite well, it fails quite spectacularly if you change the font size of the form (to inherit a consistent font across all of your controls).

Here is a simple WPF window with a textblock. Notice how the text in the window looks lighter than that in the title.

<Window x:Class="ControlPanelMock.Window1"

    xmlns="http://schemas.Microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    Title="Window1" Height="300" Width="300">

    <StackPanel>

        <TextBlock Text="Window1" />

    </StackPanel>

</Window>

I’m going to try some simple tests to see how bad my eyes are, but first I need a baseline. Lets take a second to examine the control panel home page.

According to the Microsoft User Experience Interaction Guidelines that text at the top “Adjust your computer’s settings” should be Segoe UI, 12pt. In fact we can quickly duplicate the font section of UI Guidelines with the following XAML.

<Window x:Class="ControlPanelMock.Window1"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    Title="Window1" Height="347" Width="400">

    <StackPanel Margin="25">

        <TextBlock Text="Window1 Default Text" />

        <TextBlock Text="Title Bar Text - Segoe UI, 9pt" FontFamily="Segoe UI" FontSize="9pt"/>

        <TextBlock Text="Main Instructions - Segoe UI, 12pt, #003399 " FontFamily="Segoe UI" FontSize="12pt" Foreground="#003399"/>

        <TextBlock Text="Secondary instructions - Segoe UI, 9pt" FontFamily="Segoe UI" FontSize="9pt"/>

        <TextBlock Text="Normal  - Segoe UI, 9pt" FontFamily="Segoe UI" FontSize="9pt"/>

        <TextBlock Text="Emphasised Text - Segoe UI, 9pt, Bold" FontFamily="Segoe UI" FontSize="9pt" FontWeight="Bold" />

        <Border><TextBlock Text="Editable Text - Segoe UI, 9pt" FontFamily="Segoe UI" FontSize="9pt"/></Border>

        <TextBlock Text="Disabled Text  - Segoe UI, 9pt, #323232" FontFamily="Segoe UI" FontSize="9pt" Foreground="#323232" />

        <TextBlock Text="Link  - Segoe UI, 9pt, #323232" FontFamily="Segoe UI" FontSize="9pt" Foreground="#323232" />

        <TextBlock Text="Disabled Text  - Segoe UI, 9pt, #0066cc" FontFamily="Segoe UI" FontSize="9pt" Foreground="#0066cc" />

        <TextBlock Text="Links (Hover)  - Segoe UI, 9pt, #3399ff" FontFamily="Segoe UI" FontSize="9pt" Foreground="#3399ff" />

        <TextBlock Text="Adjust your computer's settings " FontFamily="Segoe UI" FontSize="12pt" Foreground="#003399"/>

        <TextBlock Text="System and Security " FontFamily="Segoe UI" FontSize="12pt" Foreground="#006e12"/>

        <TextBlock Text="Appearance and personalisation " FontFamily="Segoe UI" FontSize="12pt" Foreground="#00ae1d"/>

    </StackPanel>

</Window>

Now the last three lines of the above are special, and entered to directly replicate the look of the control panel as before, so lets compare

Control Panel	WPF

The first thing I note is that the OS cleartype seems to be a using a different algorithm to the WPF. Note how the colours are truer with the OS rendering. In fact if you examine the vertical stick of the ‘d’ in ‘Adjust’ on WPF you note that while the centre pixel is #003399 on the OS rendering, it is #0033a2 on the WPF, although if you examine pixels in a horizontal run such as the top of the ‘o’ or ‘s’ then WPF does manage to generate most of them with the correct colour.

One of the most annoying parts of Font rendering is that setting either SnapsToDevicePixels="False" or SnapsToDevicePixels="True" has NO effect.

Summary

On the whole WPF’s UI layout engine is much more capable of rendering UIs that correctly scale to match the system DPI, unfortunately it seems let down by its cleartype engine, which isn’t pixel perfect. Is this likely to be an issue?

UPDATE

 Looks like its going to be fixed properly in WPF 4.0 http://blogs.msdn.com/text/archive/2010/03/05/additional-wpf-text-clarity-improvements.aspx