Styling windows 8 – 2 Text and font styles

Now when you have the basic colors in place it’s time to attack the next style issue – texts and fonts. By now it’s obvious that the colors for the text you write shouldn’t be set using the color picker directly. If you start doing it like that you will sooner or later end up spelunking for that almost white text in a generated item template held in a wrap grid buried deep in the structure of a hub page. Add that to a non-blendable page and we might as well set up a search to get you out of there. The index so far then:

Styling windows 8 – 1 Colors and themes
Styling windows 8 – 2 Text and font styles
Styling windows 8 – 3 Implicit and explicit styling
Styling windows 8 – 4 The button

More resources

But before we go into the text and font styles I would like to add a few words on the resource chain. When you add new items to resources it can be made on a few different levels:

  • The current control (one-off styles, often a dedicated ItemTemplate)
  • One up is current page – Use it for page specific stuff, ItemTemplates, page text styles, etc.
  • Above is the application level (App.xaml). I try to avoid this one – it gets bloated.
  • And at the top separate resource, better place things here for application level resources. Colors, text styles, typography settings, control styles.

Wherever you place the stuff, trust the tools. If you find you want the same style on other pages move it up one level. Use Blend to move it around and it will handle renaming and references as expected. Also, don’t hesitate to bind some d:DataContext with sample data to your style, it will save you hours.

Pixels and points

There is always a bit of confusion around font sizes. I’ll try to clear up the mess just a little bit.

Points – Absolut measurement 1/72 of an inch. A typography measure that would have been great if it had retained that absolute size.

Point problem: Points in Blend is actually just a translation based on a 96 dpi display. (point/96 x 72 = pixel value) not the absolute value it should be. You might as well go into settings and change that to show pixels instead.

Pixels – In code and in XAML you set the size in pixels, that’s the easy part. One pixel should of course be a physical screen pixel.

However, in Windows 8 they no longer correspond to physical screen pixels. Truth is, they are actually not pixels at all but DIPs; Device Independent Pixels. These will adjust according to scree DPI in steps of 100%, 140% and 180%. This way the physical size will stay roughly the same regardless of screen DPI. Make sense?

Trust me the DIPs are your best friend, you hardly have to worry about as this is handled by the system. If you just base your designs on the 1366×768 display and work out the translation from points to pixels you should be safe. Next time you are told to use 20 point Segoe UI just translate it with 20/96×72 and set it to 15 pixels.

What you absolutely have to do is check your design in the correct size. It can be as simple as just adding the image to a device and show it on screen or if you don’t have one print it out on paper. Just make sure it’s in the correct physical size of the target display.

Font styles

A good way to get into text styling is to check out the standard styles that are defined. Start by getting into the StandardStyles.xaml in Common. There you have lots of good stuff. Head down in the xaml code until you get to the TextBlock styles. There you will find BasicTextStyle, the mother of the TextBlock styles (It’s in the TargetType property). This looks like this:

I also included the next style BaseLineTextStyle, just to show you how you base one style upon another style (Obviously with the BasedOn property, bound to the static resource). This way you just have to add minimal code to create a new style based upon another.

Unlike the color scenario, the content of StandardStyles.xaml are not set in the system but included in App.xaml. This means that you should follow the advice in the file and make a copy. I already did that in the last article and now have a ThemeStyles.xaml in the project, so actually the StandardStyles.xaml in my project is now never used.

So to the problem with the application title. The first thing is the color that was easy, we already have the basic color in JaywayBlue. Next is adding a brush, let’s name it ApplicationTitleForgroundThemeBrush. Last is to identify what style is used in application title. Easiest way is to simply select the text in blend and the right click and open the current applied style, this will get you to ThemeStyles.xaml with a view over the current text and what it looks like:

EditStyle

Now the next step is to set the current brush to the ApplicationTitleForgroundThemeBrush that will now be present in in the local styles. And just for fun set the FontWeight of the text to SemiBold. The code will end up looking like this:

Should I use Segoe UI SemiBold as font or set FontWeight to SemiBold?

If you have played around with Bold/SemiBold, etc. You may notice that you can either set the Font to Segoe UI Semibold or the FontWeight on Segoe UI to Semibold. Sometimes when you try set it, the value bounces back again to the default. Very annoying. Some places you even have both Semilight and SemiLight to choose from. I have tried to dig into why it is like this and what it means. I have com up with the folowing:

If you base on a style that uses the FontFamily Segoe UI SemiBold, and then change FontWeight to SemiLight, it wont work as that FontFamily do not inlude the SemiLight fontweight…

Next up

I could probably go on an write more about fonts and font styles but I hope this was an introduction to the basics. A few last advices:

  • If you find that you have changed theme directly on a text, create a new style in the page with the new changes. If you find that it’s used in more pages, just push it up one level.
  • When handling larger texts that should be read as a magazine or article use a serif font, for now the suggestion is to use Cambria.

Next up in styling your application is the Implicit and Explicit control styles. Until then.

As usual, Fonts and text styles is zipped up for you

6 Comments

  1. Nope it doesn’t help me.because I have a TextBlock which has text with two different style.then I have to have seraapte TextBlock Note :I am unable to post code here. my previous comment It should have been code.:(

  2. There are a few different solutions on how to apply different your styles here:

    • The simplest solution is to have a textblock and use run tags to separate the different styles.
    • If you have two completely different text blocks you can always put them in a stackpanel and lay them out with a little margin to create the impression of a single line.
    • If there are more that fits on a line use a wrappanel.
    • The most complete solution is to use a RichTextBlock and feed it with the correct styled text. Some of what you can do with it is actually in a previous post of mine, however the link stuff cant be used in Windows 8.

    • Actually if you go as far as using a RichTextBox and make it non editable you can even feed it with a rich text formated (RTF) file with formatting in it.

    So, as you can see, there are a number of solutions to your problem depending on what your gole is. // Cheers

Trackbacks for this post

  1. Styling windows 8 – 1 Colors and themes – Jayway
  2. Windows 8 Developer Links – 2012-10-31 | Dan Rigby
  3. Styling windows 8 – 3 Implicit and explicit styling – Jayway
  4. Styling windows 8 – 4 The button – Jayway

Leave a Reply