Schrift
Schriften effektiv und gezielt einsetzen
Typografie strukturiert Inhalte und ermöglicht Nutzenden durch eine klare Hierarchie den einfachen Zugang zu Informationen.
Für die Schrift im KERN UX-Standard fiel die Wahl auf die Noto. Sie ist barrierefrei und gut lesbar. Außerdem deckt sie sämtliche Zeichen und Sprachen ab. Noto wird im Auftrag von Google entwickelt und ist frei verfügbar.
Semantische Tokens
Für Schriften können in Figma noch keine Tokens über Variablen verwendet werden. Im Code gibt es sie jedoch bereits. Die Benennungssystematik für die semantischen Schriften folgt dem allgemeinen Prinzip wie unter Tokens beschrieben. Speziell für Schriften werden die im Folgenden beschriebenen Bezeichnungen verwendet.
Concept
- family beschreibt die Schriftart.
- weight beschreibt die Schriftstärke.
- line-height beschreibt den Zeilenabstand.
- size beschreibt die Schriftgröße.
Property
Jedes „Concept“ hat unterschiedliche „Properties“. Im folgenden sind die unterschiedlichen „Properties“ für die jeweiligen „Concepts“ gelistet.
Property für family
| Token | Name | Beispiel |
|---|---|---|
| --semantic-font-family-default | Noto Sans | ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890 |
Properties für weight
| Token | Weight | Beispiel |
|---|---|---|
| --semantic-font-weight-light | 300 | Zwölf Boxkämpfer jagen Viktor quer über den großen Sylter Deich. |
| --semantic-font-weight-regular | 400 | Zwölf Boxkämpfer jagen Viktor quer über den großen Sylter Deich. |
| --semantic-font-weight-bold | 700 | Zwölf Boxkämpfer jagen Viktor quer über den großen Sylter Deich. |
Properties für line height
| Token | Value | Beispiel |
|---|---|---|
| --semantic-font-line-height-dense | 125% | Zwölf Boxkämpfer jagen Viktor quer über den großen Sylter Deich. |
| --semantic-font-line-height-default | 150% | Zwölf Boxkämpfer jagen Viktor quer über den großen Sylter Deich. |
| --semantic-font-line-height-relaxed | 175% | Zwölf Boxkämpfer jagen Viktor quer über den großen Sylter Deich. |
Properties für size
Die semantischen „sizes“ beruhen auf den „core-sizes“, wie sie unter Größen und Abstände zu finden sind. Einige Größen sind im Code fluide angelegt, so dass sie je nach Bildschirmbreite optimiert dargestellt werden. In der Figma-Datei wird dies noch nicht abgebildet.
| Token | rem | px | Beispiel |
|---|---|---|---|
| --semantic-size-4xl | 4 | 64 | KERN UX-Standard |
| --semantic-font-size-3xl | 3 | 48 | KERN UX-Standard |
| --semantic-font-size-2xl | 2 | 32 | KERN UX-Standard |
| --semantic-font-size-xl | 1.75 | 28 | KERN UX-Standard |
| --semantic-font-size-lg | 1.5 | 24 | KERN UX-Standard |
| --semantic-font-size-md | 1.25 | 20 | KERN UX-Standard |
| --semantic-font-size-sm | 1.125 | 18 | KERN UX-Standard |
| --semantic-font-size-base | 1 | 16 | KERN UX-Standard |
| --semantic-font-size-xs | 0.875 | 14 | KERN UX-Standard |
Text richtig stylen
Heading
Um Headings semantisch korrekt zu verwenden, steht die Heading-Komponente sowohl im Code als auch in der Figma-Datei zur Verfügung. Hier sind den Klassen von H1 bis H6 entsprechende semantische Tokens zugewiesen.
zur Heading-Komponente
Text
Für Fließtexte stehen drei Styles zur Verfügung. In der Figma-Datei gibt es dafür die Text-Komponente, in der die entsprechenden Styles hinterlegt sind.
- Standard: Die Standard-Größe für Fließtext sind 16 Pixel (size = base).
- Large: Die Größe Large wird für einleitende Texte verwendet, die größer dargestellt werden sollen.
- Small: Die Größe Small wird für unwichtigere Texte verwendet wie Fußnoten oder Bildunterschriften.
Themes
Die Schriftfamilie kann für ein neues Theme angepasst werden. Das bedeutet, dass Schriften durch andere Schriftarten ersetzt werden, die sich in ihrer visuellen Ausprägung von der KERN Schriftfamilie unterscheiden. Wir raten davon ab, da Schrift das komplette Erscheinungsbild des Design-Systems ändert, das derzeit auf die Noto optimiert ist. Möglicherweise passen Abstände und Größen nicht mehr.
Sollte eine andere Schriftfamilie verwendet werden, muss diese - wie die Noto - die Kriterien der Barrierefreiheit erfüllen. Nicht alle Schriften sind zur barrierefreien Kommunikation gleich gut geeignet. Informiere dich vorab, ob deine gewählte Schrift die geforderten Kriterien erfüllt. Die Webseite leserlich, initiiert vom Deutschen Blinden- und Sehbehindertenverband (DBSV), liefert viele Informationen.
Eine individuelle Änderung der Schriftfamilie wird bei Updates der Figma-Datei überschrieben und muss neu hinterlegt werden.