Typografie
Das Schriftbild der WU Webanwendungen wird durch verschiedene Schnitte der Schriften Clarendon (Display) und Montserrat (Copy) geprägt.
- Clarendon Bold: Einsatz bei Headlines im Fließtext & großflächigen Modulen
- Montserrat Light: Einsatz für den Fließtext
- Montserrat Regular: Einsatz für Subnavigationslabels
- Montserrat Bold: Einsatz für Hervorhebungen & sonstige Navigationslabels (Hauptnav, Metanav)
Font Styles
| Einsatz | Größe | Schriftschnitt |
|---|---|---|
H1 |
36px/45px | Clarendon Bold |
H2 |
32px/45px | Clarendon Bold |
H3 |
28px/40px | Clarendon Bold |
H4 |
24px/36px | Clarendon Bold |
H5 |
18px/24px | Montserrat Bold |
|
Lead
|
18px/24px | Montserrat Bold |
|
Body Copy |
16px/24px | Montserrat Light |
| Button Labels | 12px | Montserrat Bold (Uppercase) |
Fließtext
Der Fließtext läuft im Content immer über die gesamte Breite. In Modulen (z.B. Teasern) wird für Copytext ebenfalls dieser Style verwendet.
Betonungen können in bold gesetzt werden.Ungeordnete Listen
- Zum Strukturieren
- von Information
- können Listen verwendet werden
- die auch verschachtelt funktionieren.
- Listen sorgen für Auflockerung und besseres Verständnis.
Geordnete Listen
-
Auflistungen verschiedener Optionen
Nummerierte Listen sind für das Vergleichen von Optionen oder Vorteilen geeignet. -
Übersichtlichkeit
Sie sind sehr übersichtlich. -
Listen-Header & Copy
Nummerierte Listen bieten noch mehr Übersicht, wenn Listen-Header und Copy-Styles verwendet werden.
Linkauszeichnungen
Es dürfen nur interne Links gesetzt werden, die einen deutlichen farblichen Kontrast aufweisen. Externe Links sind zusätzlich deutlich per Icon zu kennzeichnen.
- Downloadlinks (PDF, 200KB) sind visuell, sowie per Zusatzinfo über die Größe zu kennzeichnen.
Schrift über Bild
Desktop
Laptop / Tablet
Mobile
