Typography in Windows Presentation Foundation (WPF)


"About 80% of the time people spend with their PC is to either read or write. This should come as no surprise when you realize that text is essentially how the machine talks back to you, and until we have a technology that would allow it to interject thoughts directly into our brains, text will most likely continue to be the way we receive information from the computer screen." - An excerpt from MSDN blog on Text Rendering talks about the need to have good display of Text to the user.

If you have not heard of Typography, the wiki link on Typography would be your first stop. Typography is said to be the technique of arranging text and its design.

There's a lot imbibed into WPF Typography from the imminent knowledge of a Typographer. Nonetheless, it would be fair to say that WPF provides the rich-interface only with the advanced features like TextDecoration, Animations and Typography. WPF lets us discover the rich typographic features available in both the OpenType Fonts. And in particular, the ClearType font rendering that uses sub-pixel spacing and antialiasing is worth mentioning.

In this article, we will see few techniques of Typography in WPF that will help us do the text manipulations.

The typographic features in WPF:

  • Includes the better quality in terms of Quality and the Text Rendering,
  • Includes the OpenType typography support,
  • Include features like bidirectional text, Unicode features,
  • Includes kerning and number alignment,
  • Capitalization of letters in words (known as Ligatures),
  • Usage of custom font weights,
  • And the enhanced support for fonts.

These features were not part of the GDI and hence WPF is the only programming interface to the OpenType features. This enables you to alter the ways in which the Text is rendered.

The OpenType Font is an extension to the TrueType font and was developed by Microsoft with Adobe. The OpenType font provides various new capabilities that are not part of the Clear type font. You can check all the Features of the OpenType font here.

CAPITALS are the typographical elements that control the text rendering in capital-styled glyphs. We know that the OpenType font supports the styling formats such as small capitals, petite capitals, titling, and capital spacing and others, these styling formats allow you to control the appearance of capitals.

The following XAML code snippet shows textblocks with various kinds of Typographic Capital properties applied:

  <Window x:Class="Typography.MainWindow"
          Title="Typography in WPF" Height="350" Width="525" FontFamily="Palatino Linotype">
          <TextBlock  Grid.Row="0" Name="tb1"  Typography.Capitals="AllPetiteCaps">WPF in AllPetiteCaps</TextBlock>
          <TextBlock  Grid.Row="1" Name="tb2" Typography.Capitals="AllSmallCaps">WPF in AllSmallCaps</TextBlock>
          <TextBlock  Grid.Row="2" Name="tb3" Typography.Capitals="Normal">WPF in Normal</TextBlock>
          <TextBlock  Grid.Row="3" Name="tb4" Typography.Capitals="PetiteCaps">WPF in PetiteCaps</TextBlock>
          <TextBlock  Grid.Row="4" Name="tb5" Typography.Capitals="SmallCaps">WPF in SmallCaps</TextBlock>
          <TextBlock  Grid.Row="5" Name="tb6" Typography.Capitals="Titling">WPF in Titling</TextBlock>
          <TextBlock  Grid.Row="6" Name="tb7" Typography.Capitals="Unicase">WPF in Unicase</TextBlock>

This produces the following window.

WPF Code Output
Figure 1

The Typography property can be accessed through the code too.

   myTextBlock1.Typography.Capitals = FontCapitals.AllPetiteCaps;
   myTextBlock2.Typography.Capitals = FontCapitals.AllSmallCaps;


You might have noticed that these are inherited and attached properties that can be set on any element that renders text. The text and the graphic properties can be used side-by side to produce rich text rendering. The Text can also be mingled with Media too.

The other typographic options on the Text Elements include the Kerning, Slashed Zero, Variants etc. The typography VARIANTS allow you to render the text as Superscript, Subscript or others for an OpenType font. However, this variant feature is strictly limited to only the text contained with the Run element.

  <Window x:Class="Typography.MainWindow"
      		<TextBlock  Grid.Row="0"><Span>Code<Run Typography.Variants="Inferior">Guru</Run>
    <TextBlock  Grid.Row="1"><Span>Code<Run Typography.Variants="Normal">Guru</Run>
  <TextBlock  Grid.Row="2"><Span>Code<Run Typography.Variants="Ordinal">Guru</Run ></Span></TextBlock>
  <TextBlock  Grid.Row="3"><Span>Code<Run Typography.Variants="Ruby">Guru</Run></Span></TextBlock>
  <TextBlock  Grid.Row="4"><Span>Code<Run Typography.Variants="Subscript">Guru</Run></Span></TextBlock>
  <TextBlock  Grid.Row="5"><Span>Code<Run Typography.Variants="Superscript">Guru</Run></Span></TextBlock>

The above XAML produces this:

Figure 2

The entire list of Typographic properties can be found in MSDN. The link is provided in the references section.

Other valuable typographic property that should be used very often is the NUMERAL ALIGNMENT property. Text with OpenType fonts support both proportional and tabular formatting. Check the following sample from MSDN. The left section is proportional and the right is tabular.

MSDN WPF sample
Figure 3


The other primary stuff of Typography includes the enhanced international text and the enhanced font support.

There is neat little blog post on the MSDN blog which talks about the Advances in Typography and text rendering in the Windows 7 operating system titled "Engineering Windows 7". Click here to read it. It talks of the need to have better text rendering.


MSDN intro on Typography
Microsoft Typography
Typography on WikiPedia
Properties of Typography object
Typography NumericalAlighment
Advances in typography and text rendering in Windows 7

Related Articles

About the Author

Srinath M S

I would love to leave a footprint in this flat world


  • Slashed Zero

    Posted by dudiav on 06/20/2011 04:15pm

    Hi, I failed to use your sample for slashed zero (Typography.SlashedZero="True"). I'm using OpenType Adobe "OCR B Std" font. Could you please show me a sample that works with slashed zero? Thanks, Dudi

Leave a Comment
  • Your email address will not be published. All fields are required.

Top White Papers and Webcasts

  • Hybrid cloud platforms need to think in terms of sweet spots when it comes to application platform interface (API) integration. Cloud Velocity has taken a unique approach to tight integration with the API sweet spot; enough to support the agility of physical and virtual apps, including multi-tier environments and databases, while reducing capital and operating costs. Read this case study to learn how a global-level Fortune 1000 company was able to deploy an entire 6+ TB Oracle eCommerce stack in Amazon Web …

  • With 81% of employees using their phones at work, companies have stopped asking: "Is corporate data leaking from personal devices?" and started asking: "How do we effectively prevent corporate data from leaking from personal devices?" The answer has not been simple. ZixOne raises the bar on BYOD security by not allowing email data to reside on the device. In addition, Zix allows employees to maintain complete control of their personal device, therefore satisfying privacy demands of valued employees and the …

Most Popular Programming Stories

More for Developers

Latest Developer Headlines

RSS Feeds