Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Setting FontWeight to Bold shrinks text size

Tags:

wpf

xaml

I've been setting up a resource dictionary to style all the controls in my WPF application and I've discovered some odd behaviour when setting the font weight for a label.

I have to styles set up for labels, the first with normal font weight :

<Style x:Key="Label" TargetType="{x:Type Label}">
    <Setter Property="VerticalAlignment" Value="Center"/>
    <Setter Property="Margin" Value="10,0"/>
</Style>

and the second set to bold :

<Style x:Key="LabelBold" TargetType="{x:Type Label}">
    <Setter Property="VerticalAlignment" Value="Center"/>
    <Setter Property="Margin" Value="10,0"/>
    <Setter Property="FontWeight" Value="Bold"/>
</Style>

The trouble is that when I use the bold weighted font, the text shrinks (or the text spacing) :

enter image description here

I've searched about but I can't seem to see any reason for this, if anything I'd expect the text to expand because of the letter thickness increasing. Is this meant to happen and if so is there a way around it?

EDIT : The window is using the following fonts:

<Setter Property="TextOptions.TextFormattingMode" Value="Display"/>
<Setter Property="FontFamily" Value="Calibri"/>
<Setter Property="FontSize" Value="12"/>
like image 388
GrandMasterFlush Avatar asked Dec 27 '22 15:12

GrandMasterFlush


2 Answers

After a bit of investigation following on from Mark Hall and Sayed Saad's comments I managed to work out what was causing this: TextOptions.TextFormattingMode = Display.

As Mark pointed out, the bold font text does get bigger than the normal font text when you up the font size. However, if I changed the TextFormattingMode to "Ideal" then the bold font is bigger than the normal font irrespective of the font size.

EDIT: Based on my findings here I posted another question, the answer to this can be found here: TextOptions.TextFormattingMode affecting text with bold font weight

like image 20
GrandMasterFlush Avatar answered Jan 25 '23 10:01

GrandMasterFlush


I am not sure what is going on, but for my guess something is overriding the FontSize selection for the Bold Label. I can get about the same spacing as your example if the FontSize is set to 11 instead of 12. I get this Image with the top 2 labels set for FontSize 12 and the bottom label is set for a FontSize of 11:

enter image description here

using this:

App.Xaml

<Application x:Class="WpfApplication1.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <Style x:Key="Label" TargetType="{x:Type Label}">
            <Setter Property="VerticalAlignment" Value="Center"/>
            <Setter Property="Margin" Value="10,0"/>
        </Style>
        <Style x:Key="LabelBold" TargetType="{x:Type Label}">
            <Setter Property="VerticalAlignment" Value="Center"/>
            <Setter Property="Margin" Value="10,0"/>
            <Setter Property="FontWeight" Value="Bold"/>
        </Style>
        <Style x:Key="WindowStyle" TargetType="{x:Type Window}">
            <Setter Property="TextOptions.TextFormattingMode" Value="Display"/>
            <Setter Property="FontFamily" Value="Calibri"/>
            <Setter Property="FontSize" Value="12"/>
        </Style>
    </Application.Resources>
</Application>

MainWindow.xaml

Window x:Class="WpfApplication1.MainWindow"
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Style="{StaticResource WindowStyle}">
    <Grid>
        <Label Style="{StaticResource Label}" Height="32" HorizontalAlignment="Left" Margin="10,10,0,0" Name="label1" VerticalAlignment="Top">This is a test of font-weight:</Label>
        <Label Style="{StaticResource LabelBold}" Height="32" HorizontalAlignment="Left" Margin="10,30,0,0" Name="label2" VerticalAlignment="Top">This is a test of font-weight:</Label>
        <Label Style="{StaticResource LabelBold}" Height="32" HorizontalAlignment="Left" Margin="10,50,0,0" FontSize="11" Name="label5" VerticalAlignment="Top">This is a test of font-weight:</Label>
    </Grid>
</Window>
like image 157
Mark Hall Avatar answered Jan 25 '23 12:01

Mark Hall