This is a pre-warning of one change that will take place in an future software update of the Nokia N9: the default font, “Nokia Pure Text”, will be updated as well. This might have an impact on some of your application UIs.
The typeface of Nokia Pure Text itself will not change, but the font metrics will. The most significant change is that by default, the text will take approximately 20% more space vertically, i.e. the height of the “bounding box” of text items will increase.
The current height of the font is actually a bit too small. E.g., some of the diacritic/accent marks or descenders do not fit to the bounding box. Fixing this is important especially for non-european languages using non-latin script. The picture below shows how the same text labels render on two different software releases, PR1.0/PR1.1 on the left and the new version of the font on the right:
Whether this has any impact on your application, depends on how the UI layout has been built. In many cases, there is no impact or the change does not really matter. These cases are e.g.:
Short text labels centered on top of other graphical items (like buttons)
Lists and other pannable areas where the size anyway varies.
By using margins and other buffer, you have anyway prepared for changes in the size of the text items e.g. for localization purposes.
But you might see some small surprises if your layout directly depends on the height of the bounding box of the text items. In Qt Quick terms, that would be the Label.height or Text.height properties.
In many cases, the best approach is to design the UI so that you expect the size of the text to vary both horizontally and vertically, that is needed anyway if you provide localizations for different languages. Typically, that requires leaving enough margins or other space or placing text in pannable areas.
If that is not feasible and you need (almost) exact pixel positioning independent of the software release and current font metrics, you can think about e.g. using a trick like this:
Item {
id: titleItem
anchors.horizontalCenter: parent.horizontalCenter
anchors.top: parent.top
width: parent.width
// 1.5 is not a universal constant, see what works for you
height: titleText.font.pixelSize * 1.5
Label {
id: titleText
anchors.centerIn: parent
text: "My Title"
font.pixelSize: 40
}
}
However, be careful to leave enough space and test your application with different localizations.
More information and practical hints will be provided later.
Source Nokia Developer
