Typographie

TIP

Zugehörige SASS Datei ist _typography.scss.

Font

Die folgenden Fonts finden Verwendung

  • Apercu Pro (für Überschriften)
  • Apercu Pro Light (für Textinhalte)

www.colophon-foundry.org/typefaces/apercu/

rem vs px

rem wird verwendet, da es auf der root-Größe des HTML-Dokuments basiert. Die root-Größe enspricht normalerweise 16px. Mit html {font-size: <NEUE-GRÖßE> } kann die root-Größe geändert werden.

Headings

Heading 1

font-size: 3rem // oder 48px
line-height: 4rem

Heading 2

font-size: 1.875rem // oder 30px

Heading 3

font-size: 1.5rem // oder 24px

Heading 4

font-size: 1.25rem // oder 20px
Heading 5
font-size: 1.125rem // oder 18px
Heading 6
font-size: 1rem // oder 16px

Text

Die normale Schriftgröße ist 1rem.

Hiefür gibt es die folgende CSS-Klassen

  • Große Schriftgröße

.itz-body-big {font-size: 1.125rem;}
  • Normale Schriftgröße

.itz-body-normal {font-size: 1rem;}
  • Kleine Schriftgröße

.itz-undertitle {font-size: 0.875rem;}

Lorem ipsum

<a href="">Lorem ipsum</a>

Schriftfarben

Für die Schriftfarben gibt es die folgende CSS-Farbenklassen

.txt-dark

.txt-gray

.txt-light

.txt-primary

.txt-secondary

.txt-red

.txt-green

.txt-yellow