Version:
Typography
Übersicht
Typeface
Das Mate Design System nutzt als Fontface die Segoe UI.
Font Stack
'Segoe UI', /\* Windows \*/
Roboto, /\* Android \*/
'San Francisco', /\* iOS \& macOS \*/
'Helvetica Neue', Arial, /\* weitere Desktop\-Systeme \*/
sans\-serif /\* Basis\-Fallback \*/
Dieser Font Stack wird über das Token --mate-typography-font-family ausgeliefert und ist damit die verbindliche Fassung. Er ist unten unter Schriftart und Schriftschnitte auch als Token aufgeführt.
Type Scale
Das Mate Design System nutzt eine einzige Formel (wobei 12 px die kleinste anzunehmende Schriftgröße ist) zum berechnen der verfügbaren Schriftgrößen.
INFO
Xn = Xn-1 + {INT[(n-2)/4] + 1} * 2
Xn: Nächste Schriftgröße
Xn-1: Vorherige Schriftgröße
z.B.:
14 = 12 + {INT[(1-2/4)] + 1} * 2
...
24 = 20 + {INT[(6-2/4)] + 1} * 2
Die ausschließliche Verwendung von Größen dieser Skala schaffen visuelle und hierarchische Konsistenz.
Welche Größen und Schnitte vorzugsweise genutzt werden ist unten im Abschnitt Varianten & Zustände aufgeführt.
| REM | PX |
|---|---|
| 0,75 | 12 |
| 0,875 | 14 |
| 1,0 | 16 |
| 1,125 | 18 |
| 1,25 | 20 |
| 1,5 | 24 |
| 1,75 | 28 |
| 2 | 32 |
| 2,25 | 36 |
Die Skala umfasst damit neun Stufen von 0,75rem bis 2,25rem. Jede dieser Stufen ist als Token ausgeliefert; die Tokennamen stehen unten unter Schriftgrößen.
Font Styles
Unterschiedliche Schriftschnitte ermöglichen es, Inhalte im Design weiter zu strukturieren und Hierarchien klar herauszustellen. Bei der Verwendung eines Schriftschnittes in Kombination mit einer bestimmten Schrift Größe muss auf eine ausgewogene Balance geachtet werden. Bei der selben Größe hat ein fetter Schriftschnitt immer mehr Gewicht als ein leichter Schnitt. Ein leichter Schriftschnitt in Kombination mit einer größeren Schriftgröße steht über einer kleineren fetten Schrift.
| Style | Darstellung |
|---|---|
| Segoe UI - Bold 700 | broken_image |
| Segoe UI - Semibold 600 | broken_image |
| Segoe UI - Regular 400 | broken_image |
Überschriften
Für Überschriften wird der Segoe UI - Bold und Segoe UI - Semibold Style verwendet. Die Schriftgröße einer Überschrift ist abhängig von der Layout Struktur. Jedes User-Interface hat ggf. mehrere Hierarchieebenen die unterschiedliche Schriftgrößen für die Überschriften erfordern. Nichtsdestotrotz müssen alle Überschriften eine Schriftgröße aus der Type Scale verwenden.
Fließtext
Die Standard Schriftgröße vom Fließtext beträgt 1rem. Unter " Varianten und Zustände " stehen Klassen zur Verfügung um weitere Hierarchien wie z.B. einführende Absätze oder kleiner Fließtext umzusetzen.
Links
Links werden primär als Navigationselement genutzt wenn Inhalte in einem neuen Fenster geöffnet werden sollen. Sie können auch dazu verwendet werden, um die Darstellung von Daten zu verändern (Mehr anzeigen, weniger anzeigen) oder wenn etwas in einem Pop Up geöffnet werden soll. Sollte die Aktion durch die Nutzer die Daten manipulieren oder ändern, dann muss ein Button verwendet werden.
Links sollten sich durch Farbe und die Dekoration deutlich vom Inhalt abgrenzen und auch ohne Hover-Effekt erkennbar sein.
Link Texte müssen aussagekräftig sein. Vermeide Texte wie z.B. "Klick hier" oder "Mehr" bzw. Adressen von Webseiten.
Unter Varianten & Zustände sind Beispiele für Links zu sehen.
Struktur
Zeilenabstand
Der Zeilenabstand ist einer von vielen Faktoren, der direkt die Lesbarkeit von Texten bestimmt. Zeilenabstände stehen in Relation zu der eingesetzten Schriftgröße. Für Fließtexte beträgt das Verhältnis zwischen Zeilenabstand und Schriftgröße 1.5. Beispielweise hat der Body Text in der Größe 16px einen Zeilenabstand von 24px (16 * 1.5). Die Ausnahme dazu bilden Überschriften. Diese benötigen einen geringeren Zeilenabstand und haben das Verhältnis von 1.25.
| Typographie | Zeilenabstand |
|---|---|
| Fließtext | 1,5 * Schriftgröße |
| Überschriften | 1,25 * Schriftgröße |
Varianten und Zustände
Überschriften
| Variante | Darstellung | Margins | Verwendung | Klasse |
|---|---|---|---|---|
| XXL | broken_image | Top: 16px Bottom: 12px | Überschriften 1. Ordnung | mate\-heading\-xxl |
| XL | broken_image | Top: 12px Bottom: 8px | Überschriften 2. Ordnung | mate\-heading\-xl |
| L | broken_image | Top: 12px Bottom: 8px | Überschriften 3. Ordnung z.B. als Sektionsüberschriften auf Objektseiten | mate\-heading\-l |
| M | broken_image | Top: 12px Bottom: 8px | Überschriften 4. Ordnung z.B. in der Titelleiste | mate\-heading\-m |
| S | broken_image | Top: 8px Bottom: 4px | Überschriften 5. Ordnung z.B. als Überschriften in Dialogen | mate\-heading\-s |
| XS | broken_image | Top: 8px Bottom: 0px | Überschriften 6. Ordnung z.B. als Feldergruppen Überschriften | mate\-heading\-xs |
*Die hier dokumentierten Verwendungszwecke limitieren die Verwendung der Variante nicht darauf, sondern dienen als Beispiele in denen die jeweiligen Varianten Verwendung finden.
Hinweis
Die HTML Tags für Überschriften sind standardmäßig folgendermaßen gestyled:
H1 - Heading XXL
H2 - Heading XL
H3 - Heading L
H4 - Heading M
H5 - Heading S
H6 - Heading XS
Es gibt jedoch häufig Situationen die ein Entkoppeln von HTML Tags für Überschriften und der visuellen Darstellung erfordern. Ein Beispiel dafür ist die Überschrift in der Kopfzeile vom Anwendungsrahmen (AWR). Diese kommuniziert den Namen vom ausgewählte Modul oder Programm als H1 sematisch korrekt, spielt jedoch visuell eine untergeordnete Rolle und wird als Heading M dargestellt <h1 class="mate-heading-m">...</h1> .
Das setzten der Klassen überschreibt daher das Standard Styling der HTML Tags für Überschriften.
Fließtext
| Varianten | Darstellung | Verwendung | Klasse |
|---|---|---|---|
| Body Text L | broken_image | Einleitungsabsatz oder Zusammenfassungen | mate\-body\-l |
| Body Text M | broken_image | Hauptinformationen Fließtext | mate\-body\-m |
| Body Text S | broken_image | Hilfetexte, weiterführende Informationen | mate\-body\-s |
Hinweis
Body Text M ist die Standard Textgröße und wird für die meisten Elemente und Komponenten genutzt.
Zustände
Ein Zustand verändert ausschließlich die Textfarbe. Schriftgröße, Zeilenhöhe und Schriftschnitt bleiben unverändert. Deshalb gibt es für Zustände keine eigenen Typografie-Klassen: Sie werden über die Farb-Tokens gesetzt, die unter Colors dokumentiert sind.
| Zustände | Darstellung | Verwendung | Farb-Token |
|---|---|---|---|
| Secondary | broken_image | Sekundäre Informationen wie z.B. Hinweise unter Eingabefeldern | --mate-text-secondary |
| Success | broken_image | Erfolgsmeldungen | --mate-text-success |
| Error | broken_image | Fehlermeldungen | --mate-text-danger |
| Warning | broken_image | Warnhinweise | --mate-text-warning |
| Inverse | broken_image | Auf farbigen Signalflächen | --mate-text-primary-contrast |
| Link | broken_image | Anchor Tags |
Hinweis
Die Zustände lassen sich mit allen Überschriften- und Fließtext-Klassen kombinieren: Die Klasse setzt Schriftgröße, Zeilenhöhe und Schnitt, der Farb-Token setzt die Farbe.
Zwei Namen weichen von der Bezeichnung des Zustands ab: Der Zustand Error wird über --mate-text-danger gesetzt, der Zustand Inverse über --mate-text-primary-contrast.
Tokens
Die Typografie steht als 134 Design Tokens zur Verfügung. 14 davon sind Core-Tokens mit festen Werten: neun Schriftgrößen, zwei Schriftfamilien und drei Schriftschnitte. Die übrigen 120 bilden die semantische Ebene, die Komponenten tatsächlich verwenden. Sie ergibt sich aus 30 Textrollen mit je vier Eigenschaften – Schriftfamilie, Schriftgröße, Zeilenhöhe und Schriftschnitt. Die 30 Rollen sind sechs Heading-Stufen sowie je vier Body- und vier Label-Stufen, die es zusätzlich in drei Schnitten gibt, also 6 + 4 * 3 + 4 * 3 = 30 und damit 30 * 4 = 120 Tokens.
Dieser Abschnitt führt die 14 Core-Tokens auf. Die Textrollen der semantischen Ebene mit ihren Werten behandelt der folgende Unterabschnitt.
Schriftgrößen
Die oben beschriebene Type Scale umfasst neun Stufen bis 2,25rem. Jede Stufe ist als Token ausgeliefert. Die px-Werte gelten bei einer Basisschriftgröße von 16 px.
| Token | rem | px |
|---|---|---|
--mate-typography-font-sizing-075 | 0.75rem | 12 px |
--mate-typography-font-sizing-087 | 0.875rem | 14 px |
--mate-typography-font-sizing-100 | 1rem | 16 px |
--mate-typography-font-sizing-112 | 1.125rem | 18 px |
--mate-typography-font-sizing-125 | 1.25rem | 20 px |
--mate-typography-font-sizing-150 | 1.5rem | 24 px |
--mate-typography-font-sizing-175 | 1.75rem | 28 px |
--mate-typography-font-sizing-200 | 2rem | 32 px |
--mate-typography-font-sizing-225 | 2.25rem | 36 px |
Schriftart und Schriftschnitte
Die restlichen fünf Core-Tokens tragen die Schriftfamilien und die Schriftschnitte.
| Token | Wert |
|---|---|
--mate-typography-font-family | 'Segoe UI', Roboto, 'San Francisco', 'Helvetica Neue', Arial, sans-serif |
--mate-typography-font-family-icon | 'Material Symbols', 'Material Icons' |
--mate-typography-font-weight-regular | 400 |
--mate-typography-font-weight-medium | 600 |
--mate-typography-font-weight-bold | 700 |
Die drei Schriftschnitte entsprechen den oben unter Font Styles dokumentierten Styles: 400 ist Regular, 600 ist Semibold und 700 ist Bold. Der Token für 600 heißt --mate-typography-font-weight-medium, obwohl der zugehörige Style Semibold heißt.
Textrollen
Die Textrollen bilden die semantische Ebene der Typografie. Sie sind in drei Familien gegliedert: Heading für Überschriften, Body für Fließtext und Label für die Beschriftung von Bedienelementen. Jede Rolle trägt genau vier Eigenschaften, die als eigene Tokens vorliegen und deren Namen sich nur im Suffix unterscheiden: -font-family, -font-size, -line-height und -font-weight. Jeder der 120 Tokennamen setzt sich damit aus dem Rollen-Präfix und einem dieser vier Suffixe zusammen – die folgenden Tabellen führen deshalb nur die Präfixe auf.
Der Schriftschnitt wird über drei Gewichte gesetzt: regular 400, medium 600 und bold 700. Sie entsprechen den unter Font Styles gezeigten Schnitten Segoe UI Regular, Semibold und Bold. Die Schriftfamilie ist bei allen Rollen dieselbe: -font-family verweist ausnahmslos auf --mate-typography-font-family, also auf den oben aufgeführten Font Stack.
Alle Rollen wechseln mit dem Theme. Die Tokennamen bleiben dabei gleich, nur die Werte ändern sich; die Gewichte und die Schriftfamilie bleiben in beiden Themes identisch. Siehe dazu Mobile Theme.
Überschriften
Die Heading-Familie umfasst sechs Rollen. Sie tragen keinen Schnitt im Namen, weil je Rolle genau ein Gewicht festgelegt ist. Die px-Werte gelten bei einer Basisschriftgröße von 16 px.
| Rolle | Token-Präfix | Schriftgröße Desktop | Schriftgröße Mobile | Zeilenhöhe Desktop | Zeilenhöhe Mobile | Schnitt |
|---|---|---|---|---|---|---|
heading-xs | --mate-typography-heading-xs | 1rem / 16 px | 1.125rem / 18 px | 1.3rem / 20,8 px | 1.4rem / 22,4 px | bold (700) |
heading-sm | --mate-typography-heading-sm | 1.125rem / 18 px | 1.25rem / 20 px | 1.5rem / 24 px | 1.7rem / 27,2 px | bold (700) |
heading-md | --mate-typography-heading-md | 1.25rem / 20 px | 1.5rem / 24 px | 1.7rem / 27,2 px | 1.9rem / 30,4 px | bold (700) |
heading-lg | --mate-typography-heading-lg | 1.5rem / 24 px | 1.75rem / 28 px | 1.9rem / 30,4 px | 1.9rem / 30,4 px | medium (600) |
heading-xl | --mate-typography-heading-xl | 1.75rem / 28 px | 2rem / 32 px | 1.9rem / 30,4 px | 2.5rem / 40 px | medium (600) |
heading-xxl | --mate-typography-heading-xxl | 2rem / 32 px | 2rem / 32 px | 2.25rem / 36 px | 2.5rem / 40 px | medium (600) |
Die drei kleinen Rollen sind bold gesetzt, die drei großen medium. Jede Rolle rückt im Mobile Theme eine Stufe der Type Scale nach oben – ausgenommen heading-xxl, dessen Schriftgröße bei 2rem bleibt und nur eine größere Zeilenhöhe erhält. Dadurch tragen heading-xl und heading-xxl im Mobile Theme dieselbe Schriftgröße und dieselbe Zeilenhöhe und unterscheiden sich dort in keiner der vier Eigenschaften mehr.
Fließtext
Die Body-Familie hat vier Stufen. Jede Stufe liegt in drei Schnitten vor, deren Suffix zwischen Stufe und Eigenschaft steht, etwa --mate-typography-body-md-bold-font-size. Schriftgröße und Zeilenhöhe sind je Stufe über alle drei Schnitte identisch; die Schnitte unterscheiden sich ausschließlich im Schriftgewicht. Das gilt im Desktop Theme wie im Mobile Theme.
| Stufe | Token-Präfix | Schriftgröße Desktop | Schriftgröße Mobile | Zeilenhöhe Desktop | Zeilenhöhe Mobile | Schnitte |
|---|---|---|---|---|---|---|
body-xs | --mate-typography-body-xs | 0.75rem / 12 px | 0.875rem / 14 px | 1.125rem / 18 px | 1.3rem / 20,8 px | -regular 400-medium 600-bold 700 |
body-sm | --mate-typography-body-sm | 0.875rem / 14 px | 1rem / 16 px | 1.3rem / 20,8 px | 1.5rem / 24 px | -regular 400-medium 600-bold 700 |
body-md | --mate-typography-body-md | 1rem / 16 px | 1.125rem / 18 px | 1.5rem / 24 px | 1.7rem / 27,2 px | -regular 400-medium 600-bold 700 |
body-lg | --mate-typography-body-lg | 1.125rem / 18 px | 1.25rem / 20 px | 1.7rem / 27,2 px | 1.875rem / 30 px | -regular 400-medium 600-bold 700 |
Der vollständige Tokenname entsteht aus Präfix, Schnitt-Suffix und Eigenschafts-Suffix: --mate-typography-body-lg-medium-line-height ist die Zeilenhöhe von Body LG im Schnitt medium. Jede Stufe rückt im Mobile Theme eine Stufe der Type Scale nach oben.
Label
Die Label-Familie ist genauso aufgebaut wie die Body-Familie: vier Stufen, je Stufe die drei Schnitte -regular, -medium und -bold, je Schnitt die vier Eigenschaften.
| Stufe | Token-Präfix | Schriftgröße Desktop | Schriftgröße Mobile | Zeilenhöhe Desktop | Zeilenhöhe Mobile | Schnitte |
|---|---|---|---|---|---|---|
label-xs | --mate-typography-label-xs | 0.75rem / 12 px | 0.875rem / 14 px | 1.125rem / 18 px | 1.3rem / 20,8 px | -regular 400-medium 600-bold 700 |
label-sm | --mate-typography-label-sm | 0.875rem / 14 px | 1rem / 16 px | 1.3rem / 20,8 px | 1.5rem / 24 px | -regular 400-medium 600-bold 700 |
label-md | --mate-typography-label-md | 1rem / 16 px | 1.125rem / 18 px | 1.5rem / 24 px | 1.7rem / 27,2 px | -regular 400-medium 600-bold 700 |
label-lg | --mate-typography-label-lg | 1.125rem / 18 px | 1.25rem / 20 px | 1.7rem / 27,2 px | 1.875rem / 30 px | -regular 400-medium 600-bold 700 |
Die Werte sind Stufe für Stufe und Schnitt für Schnitt dieselben wie bei der Body-Familie, in beiden Themes und in allen vier Eigenschaften. --mate-typography-label-md-bold-font-size und --mate-typography-body-md-bold-font-size lösen also auf denselben Wert auf. Die beiden Familien unterscheiden sich damit ausschließlich in ihrer Benennung.
Für Label gibt es keine CSS-Klassen. Die Label-Tokens werden im Theme direkt von Komponenten verwendet, etwa label-md-regular für die Beschriftung von Eingabefeldern und label-md-medium für die Beschriftung von Buttons.
Label oder Body – die Zuordnung ist verbindlich
Label-Tokens und Body-Tokens tragen heute dieselben Werte. Die beiden Skalen bleiben trotzdem getrennt, damit sie sich später unterscheiden können, ohne dass Anwendungscode angepasst werden muss.
Verbindlich gilt deshalb: Label-Tokens für die Beschriftung von Bedienelementen wie Eingabefeldern, Buttons und Tabs, Body-Tokens für Fließtext. Die Wahl richtet sich nach der Bedeutung des Textes, nicht nach dem aktuellen Wert – dass beide Familien heute gleich aussehen, ist kein Grund, die jeweils andere zu verwenden.
Zuordnung zu den CSS-Klassen
Die oben unter Varianten und Zustände aufgeführten Klassen setzen ihre Werte aus den Rollen-Tokens. Klassenname und Rollenname sind dabei nicht identisch: Die Klassen verwenden die einbuchstabigen Stufenkürzel S, M und L, die Tokens die zweibuchstabigen sm, md und lg. Nur bei xs, xl und xxl stimmen beide überein. Die Klasse mate-heading-l greift also auf die Rolle heading-lg zu, nicht auf eine Rolle namens heading-l – eine solche gibt es nicht.
| Klasse | HTML-Tag | Token-Rolle |
|---|---|---|
mate-heading-xxl | h1 | heading-xxl |
mate-heading-xl | h2 | heading-xl |
mate-heading-l | h3 | heading-lg |
mate-heading-m | h4 | heading-md |
mate-heading-s | h5 | heading-sm |
mate-heading-xs | h6 | heading-xs |
mate-body-l | – | body-lg-regular |
mate-body-m | – | body-md-regular |
mate-body-s | – | body-sm-regular |
mate-body-xs | – | body-xs-regular |
mate-body | body | body-md-regular |
mate-body-medium | – | keine Rolle, setzt nur --mate-typography-font-weight-medium (600) |
Die Heading-Klassen übernehmen alle vier Eigenschaften ihrer Rolle und setzen zusätzlich die auf dieser Seite dokumentierten Außenabstände. Die Body-Klassen setzen dagegen nur font-size und line-height und greifen dabei ausschließlich auf den Schnitt -regular zu. Für Fließtext in den Schnitten medium und bold gibt es keine Klasse; mate-body-medium hebt lediglich das Gewicht an, ohne die Größe zu verändern.
Die Standardtextgröße der Anwendung ist Body Text M. Die Regel für body, .app-root und .mate-body setzt Schriftgröße und Zeilenhöhe auf die Rolle body-md-regular und das Gewicht auf regular. Im Desktop Theme sind das 1rem / 16 px bei einer Zeilenhöhe von 1.5rem / 24 px, im Mobile Theme 1.125rem / 18 px bei 1.7rem / 27,2 px. Die Klasse mate-body-m trägt genau dieselben Werte und ändert an einem Standardtext deshalb nichts; mate-body-s senkt ihn auf 0.875rem / 14 px.
Umstellung im Theme noch offen
Body Text M ist als Standardtextgröße festgelegt. Im derzeit ausgelieferten Theme setzen body, .app-root und .mate-body dagegen noch die Rolle body-sm-regular, im Desktop Theme also 0.875rem beziehungsweise 14 px. Die Anhebung auf body-md-regular ist entschieden und wird im Theme nachgezogen.
Bis diese Änderung ausgeliefert ist, setzt die Klasse mate-body-m die Standardgröße ausdrücklich.
Verwendung im eigenen CSS
Für Text sind die Klassen die erste Wahl. Sie decken Überschriften und Fließtext vollständig ab und binden die richtige Rolle bereits ein. Eigenes CSS ist nur dort nötig, wo es keine Klasse gibt, etwa für Fließtext im Schnitt medium oder bold und für die Beschriftung eigener Bedienelemente.
Wo eigenes CSS nötig ist, sind die Rollen-Tokens zu verwenden, also --mate-typography-body-md-bold-font-size oder --mate-typography-label-md-medium-line-height. Zu setzen sind dabei alle vier Eigenschaften einer Rolle gemeinsam, damit Schriftgröße und Zeilenhöhe zueinander passen. Nicht zu verwenden sind die Core-Tokens --mate-typography-font-sizing-*, und nie zu verwenden sind die internen Varianten, deren Name ein Segment desktop oder mobile enthält, etwa --mate-mobile-typography-body-md-bold-font-size.
Der Grund liegt darin, wie der Theme-Wechsel wirkt: Nur die Rollen-Tokens sind je Theme eigens zugewiesen, innerhalb der Selektoren für desktop und mobile sowie innerhalb der Media Query für touchbediente Geräte. Die Core-Tokens und die internen Varianten sind dagegen unabhängig vom Theme am Wurzelelement definiert und tragen immer denselben Wert. Wer sie direkt anspricht, schreibt ein Theme im eigenen Code fest und verliert die automatische Umschaltung auf Touch-Geräten.
Die Textfarbe ist nicht Teil der Typografie-Tokens: Die vier Eigenschaften einer Rolle setzen weder color noch einen Farbwert. Die Farbe kommt aus den Farb-Tokens – --mate-text-body für Fließtext, --mate-text-heading für Überschriften und die Heading-Klassen – und ist unter Colors dokumentiert.
Info für Dev
Verwende für Text die Klassen. Wo eigenes CSS nötig ist, verwende die Rollen-Tokens und setze alle vier Eigenschaften einer Rolle gemeinsam: font-family, font-size, line-height und font-weight.
Nicht die Core-Tokens mit dem Präfix --mate-typography-font-sizing- und nie die internen Varianten mit den Segmenten desktop oder mobile. Nur die Rollen-Tokens schalten beim Theme-Wechsel um.
Achte auf die abweichenden Stufenkürzel: Die Klasse mate-heading-l gehört zur Rolle heading-lg, die Klasse mate-body-s zur Rolle body-sm-regular.