Typography

The guideline helps ensure that typography is always in harmony with the overall visual design. These guidelines apply to application and widgets, but not to documents. It is fine to use a wider range of different font sizes and formattings in documents.

Typeface Styles

KDE's default font is Hack for monospace and Noto Sans for everything else. The default font size is 10pt. KDE Plasma and Applications display seven variants of this typeface.

The seven default typeface styles

Typeface settings can be adjusted by the user and have great influence on sizing and spacing Units and Measurements in KDE's workspace and applications.

Summary

  • The monospace typeface should be used for code content, filenames, file paths.
  • Typography is treated like any other visual element when considering spacing and alignment.
  • Multi-line blocks of text should be either left or right aligned; avoid center alignment.
  • Limit the range of any dynamic type resizing to preserve the intended visual hierarchy. For example, don't resize body text to be bigger than the heading text. Or don't resize the section heading text to fit more words so that it is smaller than the body text. Or don't resize text of relatively lesser importance so that it is bigger than text or other visual elements that should be of relatively greater importance.

Guidelines

Components

Most components have a recommended typeface style. If you create a new component you should give it the same typeface style as similar existing components.

Content

You can use any typeface styles to structure your content, but try not to overuse the larger headings.

When the visual design calls for an area of exceptional focus, a larger typeface size may be used. In this case use a Light typeface weight to keep the stroke width similar to other styles throughout the interface. All other typeface characteristics for the typographic category should be maintained. For such exceptions to be effective, they must be very rare.

Don't use the same type scale for everything in your applications.
Vary the type scale appropriately in your application.

Text Color and Contrast

The text color and background color can be varied to provide additional hierarchical hints (e.g. selected text). However, the contrast between the text and background color must be sufficient to preserve legibility of the text.

Words per Line

Unless the content is long-form text like a book or a report, try to keep line lengths to no more than about eight to ten words per line. For styles requiring the use of an all-caps typeface, try to keep line lengths to no more than about three to four words per line.

Code

Kirigami

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
...
import QtQuick.Controls 2.2 as Controls
import org.kde.kirigami 2.9 as Kirigami
...
Kirigami.Heading {
    level: 1
    text: "Header 1"
}
Kirigami.Heading {
    level: 4
    text: "Header 4"
}
Controls.Label {
    font.pointSize: Kirigami.Theme.defaultFont.pointSize * 3
    text: "Extra large title"
}
Controls.Label {
    text: "Normal text in your application"
}
Controls.Label {
    text: "Use this to label buttons, checkboxes, ..."
}

Plasma

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
...
import org.kde.plasma.extras 2.0 as PlasmaExtras
import org.kde.plasma.components 3.0 as PlasmaComponents
...
PlasmaExtras.Heading {
    level: 1
    text: "Header 1"
}
PlasmaExtras.Heading {
    level: 4
    text: "Header 4"
}
PlasmaComponents.Label {
    font.pointSize: PlasmaComponents.theme.defaultFont.pointSize * 3
    text: "Extra large title"
}
PlasmaComponents.Label {
    text: "Normal text in your application"
}
PlasmaComponents.Label {
    text: "Use this to label buttons, checkboxes, ..."
}