Zum Inhalt

Schriften

Typografie

Die Typografie-Einstellungen erlauben die Einstellung der Schriftart ($font-family), der Schriftgröße des <body>, der Schriftstärken und der Schriftfarben (regulär und invertiert). Die invertierte Schriftfarbe lässt sich in Artikeln und Inhaltselementen über den Reiter Text einstellen und überschreibt die normale Farbe.

Schriftgröße, Art, Zeilenhöhe etc. haben immer auch Einfluss auf alle weiteren Elemente. Lediglich Überschriften und Formulare können individuell eingestellt werden.

Schriftart

$font-family-base

Die Einstellung überschreibt die Schriftart der Webseite.

Warning

Sofern es sich nicht um eine Standard-Schriftart handelt, muss die Schrift in Anführungszeichen "Meine Schriftart" gesetzt und zusätzlich im Seitenlayout eingebunden werden. Zwecks Ladezeiten-Optimierung empfiehlt sich immer eine lokale Einbindung der Schriftarten.

Verfügbare (S)CSS-Variablen

SCSS
$font-family
CSS
var(--font-family)

Schriftgröße

$font-size-base

Beeinflusst die Schriftgröße für normale Texte einer Webseite und kann in px und rem angegeben werden.

Verfügbare (S)CSS-Variablen

SCSS
$font-size-base
CSS
var(--fs-base)

Zeilenhöhe

$line-height-base

Dient der Einstellung der vertikalen Zeilenhöhe von Schriften.

Verfügbare (S)CSS-Variablen

SCSS
$line-height-base
CSS
var(--leading-base)

Schriftstärken

$font-weight-base $font-weight-* $strong-font-weight

Die Standard-Schriftstärke kann über $font-weight-base festgelegt werden. Restliche Schriftstärken werden lediglich in der Konfiguration verwendet.

Info

Sofern keine Standard-Schriftart eingestellt wurde, müssen die Schriftstärken der Schriftart eingebunden werden, damit der Effekt sichtbar wird.

Verfügbare (S)CSS-Variablen

SCSS
$font-weight-base
$font-weight-light
$font-weight-regular
$font-weight-medium
$font-weight-semibold
$font-weight-bold
CSS
var(--fw-base)
var(--fw-light)
var(--fw-regular)
var(--fw-medium)
var(--fw-semibold)
var(--fw-bold)

Schriftfarben

$text-color-regular $text-color-invert

Der ThemeManager liefert grundsätzlich zwei Farben für normalen Text, welche über die StyleManager-Einstellungen ausgewählt werden können. Sowohl die reguläre, als auch die invertierte Farbe, sind in den Standard-Einstellungen der Konfiguration in den meisten Komponenten mit diesen Farben vorbelegt.

Info

Die StyleManager-Einstellung der Text-Farbe hat zusätzlichen Einfluss auf andere Farben wie Überschriften, Buttons, Formularen etc. und kontrolliert nicht nur die Text-Farbe.

Verfügbare (S)CSS-Variablen

SCSS
$text-color-regular
$text-color-invert
CSS
var(--text-clr-base)
var(--text-clr-invert)

Strong / Bold

Strong-Schriftstärke

$strong-font-weight

Dient der Einstellung der Schriftstärke von allen <strong>-Elementen.

Strong-Farben

$strong-color-*

Hiermit können die Strong-Farben angepasst werden, welche über die Textfarbe (regulär, invertiert) über den Style-Manager eingestellt werden können.

Info

Eine über den Style-Manager eingestellte Strong-Farbe überschreibt immer auch die Text-Farbe und setzt die Invertierung durch die eingestellte Text-Farbe außer Kraft.

Zusätzlich zur Typografie werden Link-Einstellungen für die Schriftstärke, Farben und die Verzierung bereitgestellt. Da Verlinkungen auch immer mit einer Aktion verbunden sind, gibt es zusätzliche Einstellungen für das Hovern.

Info

Das CSS-Framework sieht derzeit 3 Designs vor, wobei sich diese nur in den Farben unterscheiden. Sofern eine invertierte oder reguläre Textfarbe eingestellt ist, werden Links, welche nicht explizit mit einer Link-Farbe über den StyleManager eingestellt wurden, in der jeweils passenden Version angezeigt.

$link-font-weight

Dient der Einstellung der Schriftstärke von allen <a>-Elementen.

$link-color-* $link-hover-color-*

Hiermit können die Link-Farben angepasst werden, welche über die Textfarbe (regulär, invertiert) und / oder über die Link-Farbe (regulär, invertiert, extra) über den Style-Manager eingestellt werden können.

Info

Eine über den Style-Manager eingestellte Link-Farbe überschreibt immer auch die Text-Farbe und setzt die Invertierung durch die eingestellte Text-Farbe außer Kraft.

$link-decoration-* $link-hover-decoration-*

Verzierungen (text-decorations) können verwendet werden, um Links optisch hervorzuheben. Derzeit stehen folgende Verzierungen zur Auswahl:

  • none
  • underline
  • overline
  • line-through
  • wavy
  • dotted
  • dashed
Typ Beschreibung
regular Regulärer Link
invert Invertierter Link
extra Extra Link
Verfügbare (S)CSS-Variablen

Da sich Link-Eigenschaften abhängig der Text-Farbe verhalten, gibt es nur eine CSS-Custom-Property für alle Link-Farben. Hierdurch lassen sich Link-Farben im eigenen Skin hinzufügen.

Die Typen lassen sich dem Abschnitt Link-Typen entnehmen

SCSS
$link-font-weight
$link-color-[typ]          
$link-hover-color-[typ]   
$link-decoration-[typ]  
$link-hover-decoration-[typ]
CSS
var(--a-fw)
var(--a-clr)
var(--a-clr-hvr)
var(--a-td)
var(--a-td-hvr)