MeeGo 1.2 Harmattan Developer Documentation Develop for the Nokia N9

Font sizes in different Harmattan releases


All MeeGo 1.2 Harmattan devices use the Nokia Pure Text font as default. When designing applications, it is recommended that you use the default font to easily adhere to the overall look-and-feel of the device. However, you should be aware of some differences in the font between PR 1.2 software version and earlier releases.

The most visible change is the expanded line spacing in PR 1.2. In PR 1.0 and PR 1.1 software versions, the default line spacing is tight enough to cause some issues with line spacing, mainly with non-latin characters. The default line heights are described in the following table:

Default line heights
Font height Overall line height in PR 1.0 & PR 1.1 Overall line height in PR 1.2
24px 25px 32px
32px 33px 42px

For a visualization of the different font sizes, see the comparision below:

File:Font-change-part2-pic1-crop-600.png

Note: the difference only applies when using the default font on the device, Nokia Pure Text. Other fonts have their own line height that does not change between software versions.

To make your application compatible with different software release versions, you can, for example, add a multiplier based on the actual font size to the line height. For a QML Text element, this can be done by setting the line height to a fixed pixel amount with lineHeightMode: Text.FixedHeight property and the setting the line height to the desired amount with lineHeight.

Example of setting font sizes

The following code snippet creates a QML Label, sets the font size for it to 24px and multiplies the font size by 1.3 to determine the line height. 1.3 is a good estimate for the multiplier, though you should test your application with both PR 1.2 devices and earlier devices to verify that the font behaves as expected in all Qt Quick components it has been set for.

import QtQuick 1.1
import com.nokia.meego 1.0
Page {
  // ...
  Rectangle {
      color: "#ffffbb"
      width: parent.width
      height: multiLineLabel.height
      // ...
      Label {
          id: multiLineLabel
          font.pixelSize: 24
          width: parent.width
          wrapMode: Text.WordWrap
          lineHeightMode: Text.FixedHeight
      // 1.3 is a multiplier estimate for line spacing
          lineHeight: font.pixelSize * 1.3
          text: "Lorem ipsum dolor sit amet..."
      }
  }
}

Adding line height may cause the Label area to grow, which in turn may have adverse effects on other parts of the UI. You can use a static sized Label despite using a bigger line height if you make the Label a Flickable element as shown in the example code below.

import QtQuick 1.1
import com.nokia.meego 1.0
Page {
   Label {
       id: titleText
       anchors {
           top: parent.top
           left: parent.left
           margins: 10
       }
       text: "Flickable Text"
       font.pixelSize: 42
   }
   Flickable {
       width: 400; height: 180
       contentWidth: longText.width; contentHeight: longText.height
       clip: true
       anchors {
           top: titleText.bottom
           left: parent.left
           margins: 10
       }
       Label {
           id: longText
           font.pixelSize: 24
           width: 400
           wrapMode: Text.WordWrap
           text: "Anchoring UI elements to each other..."
       }
   }
   Button {
       id: okButton
       anchors {
           bottom: cancelButton.top
           left: parent.left
           margins: 10
       }
       text: "OK"
   }
   Button {
       id: cancelButton
       anchors {
           bottom: parent.bottom
           left: parent.left
           margins: 10
       }
       text: "Cancel"
   }
}


For further information about this subject please refer to the posts on Flexible UI layouts at the Nokia N9 Developer blog.