WPF Blurry fonts issue- Solutionswpf


.NET 4 finally has a solution to WPF's poor text rendering quality, but it is well-hidden. Set the following for every window:


Default value is "Ideal" which is not at all what the name implies.

There are two other options in TextOptions, namely TextHintingMode and TextRenderingMode, but they both have sensible defaults.


Problem is described and demonstrated on the following links:

Explanation: Text Clarity in WPF. This link has font comparison.

I would like to collect all possible solutions for this problem. Microsoft Expression Blend uses WPF but fonts look readable.

  • Dark background as in Microsoft Expression Blend
  • Increasing the font size and changing the font (Calibri ... ) [link]
  • Embed windows forms [link]
  • Use GDI+ and/or Windows Forms TextRenderer class to render text to a bitmap, and then render that bitmap as a WPF control. [link]

Are there any more solutions?

This is going to be fixed in VS2010 (and WPF4) beta 2

WPF 4.0 Text Stack Improvements


Scott Hanselman's ComputerZen.com: WPF and Text Blurriness, now with complete Clarity
WPF Text Blog: Additional WPF Text Clarity Improvements

WPF: Why does text and elements blur if I use dropshadow effect on a parent item

The reason why the text is blurred is because Effects cause the elements and all sub-elements to be rendered into a Bitmap first. This means that sub-pixel rendering (ClearType) cannot take place and therefore the text appears lower-quality.

You can work around this by applying the effect to only parts of your visual tree. The parts that don't contain the text.

In your case you probably want something like this:

            <DropShadowEffect />
    <TextBlock Background="White">Test</TextBlock>

Try adding TextOptions.TextFormattingMode="Display" to the TextBlock as shown in WPF Blurry fonts problem - Solutions.
The effect might somehow increase the "bluriness" by e.g. moving the grid some fractions of a pixel or so.

Anti-Alias can be turned off starting WPF 4.0 with following option:


Why everything in WPF is blurry?

The reason for this is the anti-aliasing system which spreads the line over multiple pixels if it doesn't align with physical device pixels.

WPF is resoultion independent. This means you specify the size of an user interface element in inches, not in pixels. A logical unit in WPF is 1/96 of an inch. This scale is chosen, because most screens have a resolution of 96dpi. So in most cases 1 logical unit matches to 1 physical pixel. But if the screen resolution changes, this rule is no longer valid.

All WPF controls provide a property SnapsToDevicePixels. If set to true, the control ensures the all edges are drawn excactly on physical device pixels. But unfortunately this feature is only available on control level.

Source: Draw lines excactly on physical device pixels