Typografie

Als Grundschriftart wird Roboto verwendet und in den Schnitten Light, Regular und Bold als Web-Font eingesetzt. Sie zeichnet sich durch geometrische Einfachheit und guter Lesbarkeit aus. Hervorhebungen und Zurückgestelltes wird gemäß dem 2-px-Typo-Raster vergrößert oder verkleinert.

Light

abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz 1234567890 (!"§$%&/=?*#'@,.)

Regular

abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz 1234567890 (!"§$%&/=?*#'@,.)

Medium

abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz 1234567890 (!"§$%&/=?*#'@,.)

Bold

abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz 1234567890 (!"§$%&/=?*#'@,.)

Roboto .ttf Download


    //Standard
    

    //@Import
    

    //CSS

Hauptüberschriften 28px / Medium

Einleitungstext wird als Bodytext dargestellt (20px Light) und bietet die Möglichkeit, auffälligen Text zu Beginn einer Seite zu platzieren. Einleitungstext sollte nur am Seitenanfang und im Seitenverlauf einmalig verwendet werden.

Unter-Überschrift 22px / Medium

Bodytext ist in der Größe 14px / Regular gesetzt und linksbündig. Der Schriftschnitt Bold wird nur für die Hervorhebung einzelner Wörter oder kurzer Wortketten verwendet.

Unter-Überschrift 20px / Medium

Unter-Unter-Überschriften werden in 20px / Bold dargestellt. Eine weitere Verschachtelung von Überschriften wird zwar bis h6 unterstützt, von link UI aber nicht empfohlen.

Überschriften

Schriftgröße 28px/22px/20px
Zeilenabstand 24 - 32px
Aussenabstand unten 8px
Schriftschnitt Medium (500)
Farbe #343a40

Einleitungstext

Schriftgröße 20px
Zeilenabstand 30px
Aussenabstand unten 16px
Schriftschnitt Light (300)
Farbe #495057

Fließtext

Schriftgröße 14px
Zeilenabstand 21px
Absatz Abstand unten 8px
Schriftschnitt Regular (400)
Farbe #495057


    Headline (H1)
    Headline (H2)
    Headline (H3)

    Einleitungstext

    // Optional
    Headline (H4)
    Headline (H5)
    Headline (H6)

    //Klassen
    Headline (H1)
    Headline (H2)
    Headline (H3)
    Headline (H4)
    Headline (H5)
    Headline (H6)

Display Überschriften

Einleitungsüberschrift für ganze Seiten oder bestimmte Widget Elemente.

Display 1

Display 2

Display 3

Überschriften

Schriftgröße 64px/56px/40px
Schriftschnitt Light (300)
Farbe #343a40


    Display 1
    Display 2
    Display 3

Stile

Fußzeile oder Bildunterschrift 11px / Regular

Text Grundfarbe

Text Sekundärfarbe

Text Positiv / Erfolgreich

Text Warnung / Fehler

Text Informieren

Text Muted

Text Light


    .text-primary
    .text-secondary
    .text-success
    .text-danger
    .text-warning
    .text-info
    .text-dark
    .text-muted
    .text-light