Alles zu Schriften im Überblick

Schriftausrichtung linksbündig für alle Webanwendungen

Die Texte werden grundsätzlich linksbündig, also mit Flatterrand rechts umgesetzt.

Warum linksbündig?

  • Blocksatz eignet sich aus Gründen der Barrierefreiheit nicht, da diese Darstellung zu große Lücken im Lesefluß erzeugt.
  • Zentrierungen verlieren den Zeilenanfang.
  • Rechtsbündig angeordnete Texte verlieren ebenfalls den Zeilenbeginn.

Schriftfamilie Roboto für das Web

  • Schriftart regular: "Roboto", sans-serif;
  • Schriftart italic: "Roboto", sans-serif;
  • Schriftart bold: "Roboto", sans-serif;

Farbwerte für Schriftart Roboto

Für alle Texte sind nur 3 Farben vorgesehen!

  • Schwarz #000 und
  • blau für verlinkt #004C97
  • Weiss #FFF für Schriften auf dunklen Untergründen
    z.B. im Channel, der mobilen Navigatin und in einigen Flexmodulen (Infobox)

Schriftgrößen

normal (p) - 1.00 em bzw. 16px, Style: normal, weight: 400, color: #000

Überschrift 1 wird ausschließlich für den Seitentitel verwendet!

Überschrift 1 (h1) - 2em bzw. 32px, Style:normal, weight:500, color:#000

Überschrift 2 (h2)- 1.75em bzw. 28px, Style:normal, weight:500, color:#000

Überschrift 3 (h3) - 1.5em bzw. 24px, Style:normal, weight:500, color:#000

Überschrift 4 (h4) - 1.25em bzw. 20px, Style:normal, weight:500, color:#000

Überschrift 5 (h5) - 1.125em bzw. 18px, Style:normal, weight:500, color:#000

Ausnahme: Überschrift in 2 Spalten

Überschrift 2 (h2) in 2 Spalten 1.3em bzw. 21px

Classangabe: <h2 class="fu-title-column">

H3 Überschrift 3 im Editor

Muss noch angepasst werden!

H4 Überschrift 4 im Editor

Muss noch angepasst werden!

H5 Überschrift 5 im Editor

Muss noch angepasst werden!

Überschrift 2 (h2) in 2 Spalten 1.3em bzw. 21px

Classangabe: <h2 class="fu-title-column">

H3 Überschrift 3 im Editor

Muss noch angepasst werden!

H4 Überschrift 4 im Editor

Muss noch angepasst werden!

H5 Überschrift 5 im Editor

Muss noch angepasst werden!

Überschrift 3 (h3) in 2 Spalten 1.3em bzw. 21px in Überschriftfenster

Classangabe: <h2 class="fu-title-column">

Überschrift 3 (h3) in 2 Spalten 1.3em bzw. 21px in Überschriftfenster

Classangabe: <h2 class="fu-title-column">

Ingrid Lacher | 19.04.2018