Reliable themes: Plan for fonts

After you completes the first steps in creating your reliable theme, it is now time to move forward and consider another aspect in this task. When the palette is ready the next step in to plan for the typefaces. Fonts are a crucial aspect tha shares with colors the scene almost with the same weight.

Choosing the wrong typeface means make your application difficult to read so the user can be tired after a short usage, but this is only one aspect of the problem. Togheter with colors, fonts contribute to the general feel about the reliability and effectiveness of the user interface. It is really important to carefully choose a wide set of options about fonts

aspect of the typeface: it exists a huge number of typefaces and every one of them can be used in specific context. Carefully evaluate your font, preferring sans-serif on serif because the first one are more readable in different sizes when used in user interfaces.

size of the font: size matters, and it is not a joke. Size is not only a problem of readability but also a problem of space. you have to choose the right size balancing the readability and the space available for your content. Also you have to consider that big does not means automatically easy to read. Using an huge typeface can significantly reduce the number of words you can write in a row and force the user to move from left to right too much times.

significance and uniformity of the size: the size is also a problem of meaning. Using a big font makes the content really preminent over another part where you use a smaller typeface. An also you have to use an omogeneous size across different parts of the application. As an example if you decide to use a given size for the grid header you have to use the same size on all the grids of the application.

careful use font weight: font weight and italic can give an additional gear to your interface but as usual, abusing in bold and italics can make the interface confused and not readable. For this topic it is valid the same rule of the previous point. Choose a weight and style for each meaning and the use it omogeneously across all the elements.

contrast of font on background: color of the typeface can affect readability more than size. Always use an high contrast between the foreground and background but not the maximum. Using too high contrast can create flickering effect and reduce readability.

After choosing typeface, size, weight and the other parameters I discussed in the previous paragraphs, it is time to embed them in your theme. Here is a short set of easy rules:

#1 - Plan the fonts matrix

Given that you only use a unique typeface for your application, or that you plan for a single typeface at a time, the font used in your theme can be easily organized using a matrix. Your fonts matrix have the weight in the rows and the sizes in the columns. Here is a simple matrix:

The font matrix really can help to better understand fonts across the parts of your application. You know that the upper left corner identifies parts that are less important than the lower bottom cell. You do not have to fill every cell in the matrix, but on the contrary the better is leaving the most of the cells empty.

#2 - Name your weights and sizes

Then, as we have done with colors, it is important to abstract names for weights and sizes. Primarily for sizes but also for weights you have to use a naming convention that remove the need of knowing the number or the real weight of the typeface. For weights you can user terms like "Light", "SemiLight", "Normal", "SemiBold", "Bold". You can alternatively use FontWeight or FontFace to determine weight. Lot of fonts are created in various flavors with a face for every weight. Segoe UI is an example.

   1: <FontFamily x:Key="FontFamilyLight">Segoe UI Light</FontFamily>

   2: <FontFamily x:Key="FontFamilySemiLight">Segoe UI SemiLight</FontFamily>

   3: <FontFamily x:Key="FontFamilyNormal">Segoe UI</FontFamily>

   4: <FontFamily x:Key="FontFamilySemiBold">Segoe UI SemiBold</FontFamily>

   5: <FontFamily x:Key="FontFamilyBold">Segoe UI Bold</FontFamily>

For sizes I usually use "ExtraSmall", "Small", "Normal", "Medium", "Large", "ExtraLarge", etc... This naming helps to separate the real size from the meaning of the size. You can assign to Normal a size of 12 or 18 and then recalculate all the other sizes on the base of the middle value. It is not important the regularity of the distribution but most of the times the distance between the intervals increase on the growing of the size.

   1: <mscor:Double x:Key="FontSizeTiny">9.33</mscor:Double>

   2: <mscor:Double x:Key="FontSizeExtraExtraSmall">10.667</mscor:Double>

   3: <mscor:Double x:Key="FontSizeExtraSmall">12</mscor:Double>

   4: <mscor:Double x:Key="FontSizeSmall">13.333</mscor:Double>

   5: <mscor:Double x:Key="FontSizeNormal">14.667</mscor:Double>

   6: <mscor:Double x:Key="FontSizeMedium">18.667</mscor:Double>

   7: <mscor:Double x:Key="FontSizeMediumLarge">21.333</mscor:Double>

   8: <mscor:Double x:Key="FontSizeLarge">24</mscor:Double>

   9: <mscor:Double x:Key="FontSizeExtraLarge">29.333</mscor:Double>

  10: <mscor:Double x:Key="FontSizeExtraExtraLarge">37.333</mscor:Double>

  11: <mscor:Double x:Key="FontSizeHuge">42.667</mscor:Double>

Remember that if you decide to use FontWeight for name the weight of the your application you have then to name your face:

   1: <!-- WEIGHTS -->

   2: <FontWeight x:Key="FontWeightLight">Thin</FontWeight>

   3: <FontWeight x:Key="FontWeightSemiLight">Light</FontWeight>

   4: <FontWeight x:Key="FontWeightNormal">Normal</FontWeight>

   5: <FontWeight x:Key="FontWeightSemiBold">Bold</FontWeight>

   6: <FontWeight x:Key="FontWeightBold">Black</FontWeight>

   7:  

   8: <!-- FACE -->

   9: <FontFamily x:Key="FontFamilyDefault">Segoe UI</FontFamily>

#3 - Name your styles

As you should never use your colors directly in the markup, you should never use font family, weight and size in the same way. For fonts the problem is slightly more complicated because there is not a "Brush" instance to define to wrap the typeface. You have then to define a style for every control that have to use the typeface.

This may seems difficult but you have to keep in mind that, soon or later you will have to create a style for each element you have to put in the markup. So it is normal to assign the right typeface, weight and size combination to each one.

The most obvious element you have to create a style is TextBlock. And for textblocks you can use a conventional naming that identifies the parts where you have to put the text. To be more clear, the style you apply to textblock is the one you wrote in the cell of the font matrix.

<Style x:Key="TextInputLabelStyle" TargetType="TextBlock">
    <Setter Property="FontFamily" Value="{StaticResource FontFamilyBold}" />
    <Setter Property="FontSize" Value="{StaticResource FontSizeNormal}" />
</Style>

Also remember to determine the default aspect of the TextBlock using implicit styles

<Style TargetType="TextBlock" BasedOn="{StaticResource TextInputLabelStyle}" />

After this your fonts have been strongly organized in your theme and you can start using blend to edit styles and templates. Blend UI is able to show your planned fonts easily and you can take advantage of naming to make the look & feel more effective.