Resolution Independence
The objective of resolution independence is to make it easy for graphical user interfaces in Ubuntu to scale to all the form factors that Ubuntu targets: phones, tablets, laptops and desktops. The approach taken combines simplicity for the designers and developers with visual fidelity, quality and usability.
A new measurement unit is defined called the grid unit, abbreviated gu. 1 grid unit translates to a given number of pixels depending on the type of screen that the user interface is displayed on. For example, on a laptop computer 1 grid unit will typically translate to 8 pixels. The number of pixels per grid unit is chosen in order to preserve the perceived visual size of UI elements and therefore depends on the density of the display and the distance the user is to the screen. We also ensure that 1 grid unit is always an integer number of pixel.
Examples:
Device | Conversion |
---|---|
Most laptops | 1 gu = 8 px |
Retina laptops | 1 gu = 16 px |
Phone with 4 inch screen at HD resolution (around 720x1,280 pixels) | 1 gu = 18 px |
Tablet with 10 inch screen at HD resolution (around 720x1,280 pixels) | 1 gu = 10 px |
The grid unit defines a visual rhythm in Ubuntu and should be used for all measurements. Sizes of elements, spacing, margins, etc. should all use multiples of 1 gu.
It is available from QML as a method of the global object units, instance of Units.
Example Usage:
import Ubuntu.Components 0.1 Item { width: units.gu(2) height: units.gu(5) }
Exceptionally, in order to accommodate for the rare cases where measurements of less than 1 gu are needed another unit is available: the density independent pixel, abbreviated dp. 1 dp typically translates to 1 pixel on laptops and low density mobile phones and tablets.
Example Usage:
import Ubuntu.Components 0.1 Rectangle { height: units.dp(1) }
Vector graphics, fonts and programmatically drawn elements will usually scale well to the different devices. On the other hand, bitmaps will typically require a bit more care. We require that for each bitmap the developer provides the highest resolution version of it. The system will perform a high quality downscaling of the bitmap when needed on lower density screens.
For example, if the destination size of the bitmap is 10 gu * 10 gu and the developer targets a smart phone with 4 inch HD (720x1,280px) screen (1 gu = 18 px) and a tablet with 10 inch HD screen (1 gu = 10 px) then he/she only needs to create a bitmap of 180 px * 180 px to support both devices.
It is critical for the font sizes to be consistent across Ubuntu and to have a rhythm defining them. Instead of setting the font size in pixels or points, it is imperative to define the font size in terms of literals:
x-large |
large |
medium |
small |
x-small |
Example Usage:
import Ubuntu.Components 0.1 Label { fontSize: "small" }
For reference when designing, these sizes correspond to the following pixel measurements:
Font Size | Desktop | Smart Phone with 4" HD screen | Tablet with 10" HD screen |
---|---|---|---|
x-large | 34 px | 76 px | 42 px |
large | 20 px | 45 px | 25 px |
medium | 14 px | 31 px | 18 px |
small | 12 px | 27 px | 15 px |
x-small | 10 px | 22 px | 12 px |