Typografie
Mit Hilfe von Typografie schaffen wir klare Hierarchien, bündeln Informationen und führen damit den Nutzenden über die Benutzeroberfläche. Die konsistente Verwendung von Schriftschnitten hilft dabei, Inhalte zu verwalten und diese nützlich und effektiv darzustellen.
Inhalt
Die typographische Identität der Suva
Die Helvetica Neue LT Std ist unsere Hausschrift. In drei Schnitten widerspiegelt sie sachlich, klar und freundlich die schweizerische Herkunft der Suva. Mit den Schriftschnitten Roman, Medium und Bold gehen wir nach folgender Abstufung vor:
H1Big (Helvetica Neue Medium 64 / 72)
Verwendung
- Hauptüberschrift Starseite suva.ch
- Einmal pro Seite
H1Normal (Helvetica Neue Medium 48 / 56)
Verwendung
- Hauptüberschrift
- Mermals pro Seite einsetzbar
H2 (Helvetica Neue Medium 32 / 42)
Verwendung
- Kapitelüberschrift (Kapitel einsehbar in der Ankernavigation)
- Mermals pro Seite einsetzbar
H3 (Helvetica Neue Medium 24 / 32)
Verwendung
- Unterkapitelüberschrift (kommt nach H2 zum Einsatz)
- Mermals pro Seite einsetzbar
H4 (Helvetica Neue Medium 22 / 30)
Verwendung
- Unterkapitelüberschrift (kommt nach H3 zum Einsatz)
- Mermals pro Seite einsetzbar
H5 (Helvetica Neue Medium 20 / 28)
Verwendung
- Unterkapitelüberschrift (kommt nach H4 zum Einsatz)
- Mermals pro Seite einsetzbar
H6 (Helvetica Neue Medium 16 / 26)
Verwendung
- Unterkapitelüberschrift (kommt nach H5 zum Einsatz)
- Mermals pro Seite einsetzbar
Lead (Helvetica Neue Medium 18 / 26)
Verwendung
- Kurzer Seiteneinführungstext, der unterhalb des Haupttitels steht
- Einmal pro Seite
Text (Helvetica Neue Roman/Medium/Bold 16 / 26)
Verwendung
- Lauftext
- Mehrmals pro Seite einsetzbar
Text Small (Helvetica Neue Roman/Medium/Bold 14 / 22)
Verwendung
- Infotext (z.B. Bildlegende)
- Mehrmals pro Seite einsetzbar
Text Tiny (Helvetica Neue Roman/Medium/Bold 12 / 18)
Verwendung
- Infotext (z.B. Labeltext Formularfelder)
- Mehrmals pro Seite einsetzbar
Dos & Don'ts zum Thema Typografie
DO: Kurze, verständliche Headline (max. 3 Zeilen)
DON'T: Zu lange Headline.
DO: Zitate werden in Anführungs- und Schlusszeichen gesetzt.
DON'T: Zitate werden ohne Anführungs- und Schlusszeichen gesetzt.
DO: Teaser mit kurzem Textbeschrieb und genügend Weissraum.
DON'T: Teaser mit zu viel Text befüllen.
Ansprechpersonen
Tina Tanner
UX/UI-Designerin
Giovanni Laportosa
UX/UI-Designer