Units#

Resolution Independence Approach#

The objective of resolution independence is to make it easy for graphical user interfaces in Ubuntu Touch to scale to all the form factors that Ubuntu Touch targets: phones, tablets, laptops and desktops. The approach taken combines simplicity for the designers and developers with visual fidelity, quality and usability.

Measurement Units#

Grid Unit#

A measurement unit called the grid unit is defined, 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.

Device

Conversion

Most laptops

1 gu = 8 px

High DPI 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

Density Unit#

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.

Use#

Item {
  width:  units.gu(2)
  height: units.dp(1)
}

Device Sizes#

Device Grid Units

width

height

E5 (portrait)

42

72

M10 HD (landscape)

160

97

M10 FHD (landscape)

148

89

N5 (portrait)

47

80