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:
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:
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.