The Visual Guide to WPF Font Weights

Have you ever wondered what the difference between DemiBold and SemiBold text is? (the answer: not a whole lot). Have you ever wanted to go beyond "Normal" and "Bold" in your font weight selections? If so then this post is for you.

The following shows the different font weights (both names and numeric values) for the default UI font in Windows 7 and Windows Vista - Segoe UI at 24pt.

Segoe UI Font Weights

We can immediately see that Segoe UI supports a variety of weights, but why does 'Thin' (supposedly at 100-weight) look the same as 'Light' (300-weight)? The answer is the font itself - it only supports 4 different weights. Switching to Calibri we can see that it contains only two different weights.

Calibri Font Weights

The moral of the story is that WPF provides great typographic support for different font weights, but not all fonts will support all weights. Here is the XAML code to play around with different font families.

<Page
  xmlns="
http://schemas.microsoft.com/winfx/2006/xaml/presentation "
  xmlns:x="
http://schemas.microsoft.com/winfx/2006/xaml ">
  <Page.Resources>
    <Style TargetType="{x:Type TextBlock}">
      <Setter Property="FontFamily" Value="Calibri" />
      <Setter Property="Margin" Value="5" />
      <Setter Property="FontSize" Value="24" />
    </Style>
  </Page.Resources>
  <StackPanel >
<TextBlock FontWeight="Thin"  Text="Jackdaws love my big sphinx of quartz - Thin - 100" />
<TextBlock FontWeight="UltraLight"  Text="Jackdaws love my big sphinx of quartz - UltraLight - 200" />
<TextBlock FontWeight="ExtraLight"  Text="Jackdaws love my big sphinx of quartz - ExtraLight - 200" />
<TextBlock FontWeight="Light"  Text="Jackdaws love my big sphinx of quartz - Light - 300" />
<TextBlock FontWeight="Normal"  Text="Jackdaws love my big sphinx of quartz - Normal - 400" />
<TextBlock FontWeight="Regular"  Text="Jackdaws love my big sphinx of quartz - Regular - 400" />
<TextBlock FontWeight="Medium"  Text="Jackdaws love my big sphinx of quartz - Medium - 500" />
<TextBlock FontWeight="DemiBold"  Text="Jackdaws love my big sphinx of quartz - DemiBold - 600" />
<TextBlock FontWeight="SemiBold"  Text="Jackdaws love my big sphinx of quartz - SemiBold - 600" />
<TextBlock FontWeight="Bold"  Text="Jackdaws love my big sphinx of quartz - Bold - 700" />
<TextBlock FontWeight="UltraBold"  Text="Jackdaws love my big sphinx of quartz - UltraBold - 800" />
<TextBlock FontWeight="ExtraBold"  Text="Jackdaws love my big sphinx of quartz - ExtraBold - 800" />
<TextBlock FontWeight="Heavy"  Text="Jackdaws love my big sphinx of quartz - Heavy - 900" />
<TextBlock FontWeight="Black"  Text="Jackdaws love my big sphinx of quartz - Black - 900" />
<TextBlock FontWeight="ExtraBlack"  Text="Jackdaws love my big sphinx of quartz - ExtraBlack - 950" />
<TextBlock FontWeight="UltraBlack"  Text="Jackdaws love my big sphinx of quartz - UltraBlack - 950" />
  </StackPanel>
</Page>