Units and Measurements

Purpose

This pages gives an overview about different units used in Kirigami and applications using KDE frameworks.

Pixel

A physical pixel or dot is a physical point in a raster image. It is the smallest permissible size for anything displayed by the device.

DPI - Pixels per Inch

Pixel density is the number of physical pixels or dots that fit into one square inch on the screen. Different screens have different DPIs. Screen density = screen width (or height) in pixels / screen width (or height) in inches.

DPI is often used interchangeably with PPI, pixels per inch.

PPI / DPI Independent Pixels

A DPI independent pixel is scaled to look uniform on any screen regardless of its DPI. A lot of platforms, eg iOS, Android, the web, replaced the old physical px with a DPI px. So most of the time you read about pixel/px they're most likely talking about DPI independent pixels. Qt (and QML) support DPI independent pixels in newer versions, but because KDE and software supports older versions of Qt as well, one can not assume that pixels used in Qt or QML apps are DPI independent.

A rectangle defined with Don't:
physical pixels and Do:
DPI independent pixels .

Fonts

Since Plasma allows the user to change the font settings, any objects with dimensions defined with px (DPI independent or not) can have issues with text.

Base Units in Kirigami

There are two types of DPI independent base units in Kirigami:

• Units.gridUnit is the height needed to display one line of text. Use this for defining height and width of an element.
• Units.smallSpacing, Units.largeSpacing, and others are used to define paddings and margins.

These base units are not only DPI independent, but scale according to the font settings too. While designing, be careful not to rely on the ratio between Units.gridUnit and Units.smallSpacing/Units.largeSpacing because these change depending on the user's font settings.

Mockup Units

These are the base units in Kirigami:

Icon sizes in Kirigami

There are several predefined icon sizes in Kirigami. You should always use these icon sizes.

Mockup Units

Kirigami:

From Design to Code

For any mockup, help the developers by specifying all measurements, either in the mockup itself or in an extra guide to the mockup. It is a lot of work and it is error prone for developers trying to measure everything from a mockup. Even if the mockup is in a file format that would allow exact measurements, don't expect the developer to know how to measure it.

You don't have to provide measurement for objects that can be easily calculated. For example the size of the dark rectangle in the above example can be easily obtained.

Recommended Spacings

When you design, try to use the recommended values for margin and paddings, to ensure a uniform appearance. See Metrics and Placement for more details.

Row {
    spacing: Units.largeSpacing
    Rectangle {
        ...
    }
    Rectangle {
        ...
    }
}

Row {
    spacing: 2 * Units.smallSpacing
    Rectangle {
        ...
    }
    Rectangle {
        ...
    }
}

Ratio

Sometimes, the ratio between dimensions is more important than the actual values.

Grid {
    columns: 3
    ...
    Repeater {
        model: 9
        ...
        Rectangle {
            width: grid.width / 3
            height: grid.height / 3
            ...
        }
    }
}