TYPOGRAPHY

Übersicht

Typeface

Das Mate Design System nutzt als Fontface die Segoe UI.

Font Stack

”Segoe UI”,

”Open Sans”, /* genreller Fallback */

-apple-system, BlinkMacSystemFont, /* für Apple-Systeme (iOS & OSX) */

Roboto, “Droid Sans”, /* für Android */

Oxygen, Ubuntu, Cantarell, “Fira Sans”, /* für weitere Mobil-Systeme */

“Helvetica Neue”, Calibri, Arial, /* für Desktop-Systeme */

sans-serif /* Basis-Fallback */

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
2,625	42
3	48
3,375	54
3,75	60
4,25	68
4,75	76
5,25	84
5,75	92

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
Segoe UI - Semibold 600
Segoe UI - Regular 400

Ü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	Margins	Verwendung	Klasse
XXL	Top: 16px Bottom: 12px	Überschriften 1. Ordnung	`mate-heading-xxl`
XL	Top: 12px Bottom: 8px	Überschriften 2. Ordnung	`mate-heading-xl`
L	Top: 12px Bottom: 8px	Überschriften 3. Ordnung z.B. als Sektionsüberschriften auf Objektseiten	`mate-heading-l`
M	Top: 12px Bottom: 8px	Überschriften 4. Ordnung z.B. in der Titelleiste	`mate-heading-m`
S	Top: 8px Bottom: 4px	Überschriften 5. Ordnung z.B. als Modal Dialog Überschriften	`mate-heading-s`
XS	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 mate-text-inverse">...</h1> .

Das setzten der Klassen überschreibt daher das Standard Styling der HTML Tags für Überschriften.

Fließtext

Varianten	Verwendung	Klasse
Body Text L	Einleitungsabsatz oder Zusammenfassungen	`mate-body-l`
Body Text M	Hauptinformationen Fließtext	`mate-body-m`
Body Text S	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

Zustände	Verwendung	Klasse
Secondary	Sekundäre Informationen wie z.B. Hinweise unter Eingabefeldern	`mate-text-secondary`
Success	Erfolgsmeldungen	`mate-text-success`
Error	Fehlermeldungen	`mate-text-error`
Warning	Warnhinweise	`mate-text-warning`
Inverse	Auf dunklen Hintergründen	`mate-text-inverse`
Link		`Anchor Tags`