Typografie
Typografie trägt dazu bei, Hierarchien zu etablieren und wichtige Inhalte durch klare visuelle Muster zu kommunizieren. Eine gut gestaltete Typografie hat dadurch großen Einfluss auf die Wirkung von Produkten und kann dazu beitragen, dass Texte leicht lesbar und verständlich sind, was direkten Einfluss auf die Nutzererfahrung hat.
Schriftfamilie
Für die digitalen Produkte der Deutschen Bahn wird die von Marke entwickelte DB Neo Screen Head und DB Neo Screen Sans genutzt. Für mehr Information lese alles über unsere Schriftfamilien für digitale Anwendungen.
Code Mapping
Unsere Typography verfügt über ein einfaches und effektives Code-Mapping-System, mit dem die gängigsten HTML-Tags (h1, h2, h3, h4, h5, h6, p, small) direkt mit unseren Schriftgrößen 3xs bis 3xl verknüpft sind.
Zum Beispiel wird der h1 automatisch die größte Schriftgröße xl zugewiesen, während p automatisch die Größe md zugewiesen wird.
Size | Font Size | Line Height |
|---|---|---|
h1 | db-type-headline-font-size-xl | db-type-headline-line-height-xl |
h2 | db-type-headline-font-size-lg | db-type-headline-line-height-lg |
h3 | db-type-headline-font-size-md | db-type-headline-line-height-md |
h4 | db-type-headline-font-size-sm | db-type-headline-line-height-sm |
h5 | db-type-headline-font-size-xs | db-type-headline-line-height-xs |
h6 | db-type-headline-font-size-2xs | db-type-headline-line-height-2xs |
body | db-type-body-font-size-md | db-type-body-line-height-md |
small | db-type-body-font-size-sm | db-type-body-line-height-sm |
Größen
Sollten die vordefinierten Größen nicht ausreichen, verfügt das Design-System über eine breite Palette an Textgrößen, die stattdessen eingesetzt werden können und sicherstellen, dass die Inhalte optimal präsentiert werden können. Von der kleinsten Größe 3xs bis hin zur größten Größe 3xl haben wir eine Vielzahl von Möglichkeiten für jeden Bedarf.
Noch mehr Variationen bietet sonst noch der flexible Einsatz von den Densities, die direkt die hinter den Größen liegenden Werte beeinflusst.
Wichtig: Um sicherzustellen, dass Titel und Überschriften auch nach der automatischen responsiven Anpassung im richtigen Verhältnis zum zugehörigen Fließtext bleiben, sollten nur Schriftgrößen mit denselben Bezeichnungen kombiniert werden oder eine größere Schriftgröße für den Titel/Überschrift als für den Fließtext verwendet werden (z. B. Headline lg + Body lg)."
Headline
Font Size | Line Height | Functional | Regular | Expressive | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
Mobile | Tablet | Desktop | Mobile | Tablet | Desktop | Mobile | Tablet | Desktop | ||||
96 | 120 | 3xl | ||||||||||
80 | 96 | 3xl | 3xl | 2xl | ||||||||
64 | 80 | 2xl | 2xl | xl | ||||||||
48 | 64 | 3xl, 2xl | xl | xl | lg | |||||||
40 | 48 | 3xl, 2xl | xl | lg | 3xl, 2xl, xl | lg | md | |||||
32 | 40 | 3xl, 2xl, xl | xl | 3xl, 2xl, xl | lg | md | lg | md | sm | |||
28 | 32 | 3xl, 2xl, xl | lg | lg | lg | md | sm | md | sm | xs | ||
24 | 28 | lg | md | md | md | sm | xs | sm | xs | 2xs | ||
20 | 24 | md | sm | sm | sm | xs | 2xs | xs | 2xl, 3xs | 3xs | ||
16 | 20 | sm | xs | xs | xs | 2xs, 3xs | 3xs | 2xs, 3xs | ||||
14 | 16 | xs, 2xs, 3xs | 2xs, 3xs | 2xs, 3xs | 2xs, 3xs |
Headline-Rendering
In der Entwicklung wird ein optimiertes Headline-Rendering eingesetzt. Dabei wird per CSS – bei gleichbleibender Breite des Containers – für einen ausgeglichen Zeilenumbruch gesorgt. Im Design kann dies leider nicht automatisch passieren, es können also Unterschiede zwischen den Layouts und den umgesetzten Screens erfolgen. Geht hier in eine gute Kommunikation zwischen Design und Entwicklung.
Body
Font Size | Line Height | Functional | Regular | Expressive | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
Mobile | Tablet | Desktop | Mobile | Tablet | Desktop | Mobile | Tablet | Desktop | ||||
40 | 64 | 3xl | 3xl | |||||||||
32 | 48 | 3xl | 3xl | 2xl | 2xl | |||||||
28 | 40 | 3xl | 3xl | 2xl | 2xl | xl | xl | |||||
24 | 32 | 2xl | 2xl | xl | xl | 2xl, xl, lg | lg | lg | ||||
20 | 28 | xl | xl | 3xl, 2xl, xl, lg | lg | lg | md | md | md | |||
16 | 24 | 3xl, 2xl, xl, lg | lg | lg | md | md | md | sm | sm | sm | ||
14 | 20 | md | md | md | sm | sm | sm | xs | xs | xs | ||
12 | 16 | sm | sm | sm | xs | xs | xs | 2xs | 2xs | 2xs | ||
10 | 14 | xs, 2xs, 3xs | xs, 2xs, 3xs | xs, ,2xs, 3xs | 2xs, 3xs | 2xs, 3xs | 2xs, 3xs | 3xs | 3xs | 3xs |
Tokens
Unsere Schrifttokens sind benannte Schriftvariablen, die wir verwenden, um konsistente Schriftarten auf unserer Website oder App sicherzustellen. Jeder Schrifttoken repräsentiert eine bestimmte Schriftart, die wir in unserem Design System definieren. Diese benannten Schrifttokens erleichtern die Arbeit mit Schriftarten in der Entwicklung, da sie einfach zu referenzieren und zu ändern sind. Für mehr Information lese alles über unsere Tokens.
Du hast Fragen oder Input?
Wir haben alles dafür gegeben, dass unser Design System mit möglichst wenigen Regeln auskommt. So wird es einfach in der Anwendung, führt zu konsistenten Ergebnissen und stärkt die Marke Deutsche Bahn! Solltest du dir jedoch unsicher sein, Fragen oder einfach nur eine gute Verbesserungsidee haben, so sind wir gerne für dich da!
E-Mail schreiben Feedback in Github
Weiter