> For the complete documentation index, see [llms.txt](https://doku.themeware.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://doku.themeware.design/handbuch/layout/typografie/konfiguration.md).

# Konfiguration

## Responsive Skalierung

***

### Schriftgröße in % @Phone (<576px)

**Feldtyp**:\
Nummernfeld

**Beispiel Wert**:\
`80`

**Pfad zur Einstellung**:\
Tab "Layout" => Bereich "Typografie" => Abschnitt "Responsive Skalierung"

**Technischer Name**:\
`twt-font-size-html-xs`

{% hint style="info" %}
Mit dieser Konfiguration kannst du die Standard-Schriftgröße im entsprechenden Viewport prozentual verkleinern.

Bitte beachte aus Gründen der Barrierefreiheit, dass die Schrift nicht kleiner als 16px sein sollte.

**Beispiel**: 80
{% endhint %}

***

### Schriftgröße in % @Phone (landscape) (≥576px)

**Feldtyp**:\
Nummernfeld

**Beispiel Wert**:\
`90`

**Pfad zur Einstellung**:\
Tab "Layout" => Bereich "Typografie" => Abschnitt "Responsive Skalierung"

**Technischer Name**:\
`twt-font-size-html-sm`

{% hint style="info" %}
Mit dieser Konfiguration kannst du die Standard-Schriftgröße im entsprechenden Viewport prozentual verkleinern.

Bitte beachte aus Gründen der Barrierefreiheit, dass die Schrift nicht kleiner als 16px sein sollte.

**Beispiel**: 90
{% endhint %}

***

### Schriftgröße in % @Desktop (≥1200px)

**Feldtyp**:\
Nummernfeld

**Beispiel Wert**:\
`100`

**Pfad zur Einstellung**:\
Tab "Layout" => Bereich "Typografie" => Abschnitt "Responsive Skalierung"

**Technischer Name**:\
`twt-font-size-html-xl`

{% hint style="info" %}
Mit dieser Konfiguration kannst du die Standard-Schriftgröße im entsprechenden Viewport prozentual verkleinern.

Bitte beachte aus Gründen der Barrierefreiheit, dass die Schrift nicht kleiner als 16px sein sollte.

**Beispiel**: 100
{% endhint %}

## Text

***

### Schriftart

**Feldtyp**:\
Schriftart

**Beispiel Wert**:\
`'Inter', sans-serif`

**Pfad zur Einstellung**:\
Tab "Layout" => Bereich "Typografie" => Abschnitt "Text"

**Technischer Name**:\
`sw-font-family-base`

{% hint style="info" %}
Theme-Schriften werden automatisch von deinem Server geladen. Andere Schriften müssen individuell hinzugefügt werden.

Welche Schriften mitgeliefert werden, steht im Abschnitt [Google Fonts](/mehr-wissen/schriften.md), wie die Schriftkonfiguration funktioniert in der [Wissensdatenbank](https://wiki.themeware.design/wissensdatenbank/grundwissen/schriftkonfiguration).

**Beispiel**: 'Inter', sans-serif
{% endhint %}

***

### Größenkorrektur

**Feldtyp**:\
Nummernfeld

**Beispiel Wert**:\
`100`

**Mögliche Werte**:\
`75` bis `125`

**Pfad zur Einstellung**:\
Tab "Layout" => Bereich "Typografie" => Abschnitt "Text"

**Technischer Name**:\
`twt-font-family-base-size-adjust`

{% hint style="info" %}
Skaliert die oben gewählte Schriftart, ohne die Schriftgrößen anzupassen. 100 = keine Korrektur. Der Wert gilt für die Schriftart selbst, also überall dort, wo sie im Shop verwendet wird. Wirkt nicht bei Inter (wird von Shopware geladen), nicht bei aktiviertem Google-Fonts-Import und nicht bei eigenen Schriften.
{% endhint %}

{% hint style="warning" %}
Die Korrektur vergrößert nur die Buchstaben, nicht die Flächen um sie herum. Ein Button oder ein Badge behält seine Höhe, weil sich die Zeilenhöhe an der Schriftgröße orientiert und die bleibt unverändert. Der Text wird also größer, der Abstand zum Rand kleiner.

Die Breite wächst dagegen mit. Prüfe nach einer Änderung Buttons, Badges und die Navigation auf umbrechende Beschriftungen.

Ab etwa 120 rücken bei mehrzeiligem Fließtext die Zeilen sichtbar zusammen, weil auch der Zeilenabstand unverändert bleibt.
{% endhint %}

***

### Textfarbe

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`#111111`

**Pfad zur Einstellung**:\
Tab "Layout" => Bereich "Typografie" => Abschnitt "Text"

**Technischer Name**:\
`sw-text-color`

{% hint style="info" %}
In diesem Feld sind derzeit keine ThemeWare® Variablen ($twt-...) möglich.

Variable: **$sw-text-color**
{% endhint %}

***

### Schriftgröße

**Feldtyp**:\
Nummernfeld

**Beispiel Wert**:\
`16`

**Pfad zur Einstellung**:\
Tab "Layout" => Bereich "Typografie" => Abschnitt "Text"

**Technischer Name**:\
`twt-font-size-base`

## Überschriften

***

### Schriftart

**Feldtyp**:\
Schriftart

**Beispiel Wert**:\
`'Inter', sans-serif`

**Pfad zur Einstellung**:\
Tab "Layout" => Bereich "Typografie" => Abschnitt "Überschriften"

**Technischer Name**:\
`sw-font-family-headline`

{% hint style="info" %}
Theme-Schriften werden automatisch von deinem Server geladen. Andere Schriften müssen individuell hinzugefügt werden.

Welche Schriften mitgeliefert werden, steht im Abschnitt [Google Fonts](/mehr-wissen/schriften.md), wie die Schriftkonfiguration funktioniert in der [Wissensdatenbank](https://wiki.themeware.design/wissensdatenbank/grundwissen/schriftkonfiguration).

**Beispiel**: 'Inter', sans-serif
{% endhint %}

***

### Größenkorrektur

**Feldtyp**:\
Nummernfeld

**Beispiel Wert**:\
`100`

**Mögliche Werte**:\
`75` bis `125`

**Pfad zur Einstellung**:\
Tab "Layout" => Bereich "Typografie" => Abschnitt "Überschriften"

**Technischer Name**:\
`twt-font-family-headline-size-adjust`

{% hint style="info" %}
Skaliert die oben gewählte Schriftart, ohne die Schriftgrößen anzupassen. 100 = keine Korrektur. Der Wert gilt für die Schriftart selbst, also überall dort, wo sie im Shop verwendet wird. Wirkt nicht bei Inter (wird von Shopware geladen), nicht bei aktiviertem Google-Fonts-Import und nicht bei eigenen Schriften.
{% endhint %}

{% hint style="warning" %}
Die Korrektur vergrößert nur die Buchstaben, nicht die Flächen um sie herum. Ein Button oder ein Badge behält seine Höhe, weil sich die Zeilenhöhe an der Schriftgröße orientiert und die bleibt unverändert. Der Text wird also größer, der Abstand zum Rand kleiner.

Die Breite wächst dagegen mit. Prüfe nach einer Änderung Buttons, Badges und die Navigation auf umbrechende Beschriftungen.

Ab etwa 120 rücken bei mehrzeiligem Fließtext die Zeilen sichtbar zusammen, weil auch der Zeilenabstand unverändert bleibt.
{% endhint %}

***

### Textfarbe

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`$sw-color-brand-primary`

**Pfad zur Einstellung**:\
Tab "Layout" => Bereich "Typografie" => Abschnitt "Überschriften"

**Technischer Name**:\
`sw-headline-color`

{% hint style="info" %}
In diesem Feld sind derzeit keine ThemeWare® Variablen ($twt-...) möglich.

Variable: **$sw-headline-color**
{% endhint %}

***

### Schriftgröße (h1)

**Feldtyp**:\
Nummernfeld

**Beispiel Wert**:\
`36`

**Pfad zur Einstellung**:\
Tab "Layout" => Bereich "Typografie" => Abschnitt "Überschriften"

**Technischer Name**:\
`twt-font-size-h1`

***

### Schriftgröße (h2)

**Feldtyp**:\
Nummernfeld

**Beispiel Wert**:\
`28`

**Pfad zur Einstellung**:\
Tab "Layout" => Bereich "Typografie" => Abschnitt "Überschriften"

**Technischer Name**:\
`twt-font-size-h2`

***

### Schriftgröße (h3)

**Feldtyp**:\
Nummernfeld

**Beispiel Wert**:\
`24`

**Pfad zur Einstellung**:\
Tab "Layout" => Bereich "Typografie" => Abschnitt "Überschriften"

**Technischer Name**:\
`twt-font-size-h3`

***

### Schriftgröße (h4)

**Feldtyp**:\
Nummernfeld

**Beispiel Wert**:\
`20`

**Pfad zur Einstellung**:\
Tab "Layout" => Bereich "Typografie" => Abschnitt "Überschriften"

**Technischer Name**:\
`twt-font-size-h4`

***

### Schriftgröße (h5)

**Feldtyp**:\
Nummernfeld

**Beispiel Wert**:\
`16`

**Pfad zur Einstellung**:\
Tab "Layout" => Bereich "Typografie" => Abschnitt "Überschriften"

**Technischer Name**:\
`twt-font-size-h5`

***

### Schriftgröße (h6)

**Feldtyp**:\
Nummernfeld

**Beispiel Wert**:\
`14`

**Pfad zur Einstellung**:\
Tab "Layout" => Bereich "Typografie" => Abschnitt "Überschriften"

**Technischer Name**:\
`twt-font-size-h6`

## Links

***

### Linkfarbe

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`$sw-color-brand-primary`

**Pfad zur Einstellung**:\
Tab "Layout" => Bereich "Typografie" => Abschnitt "Links"

**Technischer Name**:\
`twt-link-color`

{% hint style="info" %}
Wähle die gewünschte Farbe für allgemeine Links in der Storefront.

**Beta**: Diese Konfiguration befindet sich in der Testphase, probiere Sie gerne einmal aus.

**Hinweis**: Die Hover-Farbe wird ebenfalls aus dieser Farbe generiert.
{% endhint %}

## Strichstärke

***

### Strichstärke (light)

**Feldtyp**:\
Nummernfeld

**Beispiel Wert**:\
`400`

**Pfad zur Einstellung**:\
Tab "Layout" => Bereich "Typografie" => Abschnitt "Strichstärke"

**Technischer Name**:\
`twt-font-weight-light`

{% hint style="info" %}
Wähle die gewünschte Schriftstärke:\
100 = Thin (Hairline)\
200 = Extra Light (Ultra Light)\
**300 = Light**\
400 = Normal (Regular)\
500 = Medium\
600 = Semi Bold (Demi Bold)\
700 = Bold\
800 = Extra Bold (Ultra Bold)\
900 = Black (Heavy)\
950 = Extra Black (Ultra Black)
{% endhint %}

***

### Strichstärke (normal)

**Feldtyp**:\
Nummernfeld

**Beispiel Wert**:\
`400`

**Pfad zur Einstellung**:\
Tab "Layout" => Bereich "Typografie" => Abschnitt "Strichstärke"

**Technischer Name**:\
`twt-font-weight-normal`

{% hint style="info" %}
Wähle die gewünschte Schriftstärke:\
100 = Thin (Hairline)\
200 = Extra Light (Ultra Light)\
300 = Light\
**400 = Normal (Regular)**\
**500 = Medium**\
600 = Semi Bold (Demi Bold)\
700 = Bold\
800 = Extra Bold (Ultra Bold)\
900 = Black (Heavy)\
950 = Extra Black (Ultra Black)
{% endhint %}

***

### Strichstärke (bold)

**Feldtyp**:\
Nummernfeld

**Beispiel Wert**:\
`600`

**Pfad zur Einstellung**:\
Tab "Layout" => Bereich "Typografie" => Abschnitt "Strichstärke"

**Technischer Name**:\
`twt-font-weight-bold`

{% hint style="info" %}
Wähle die gewünschte Schriftstärke:\
100 = Thin (Hairline)\
200 = Extra Light (Ultra Light)\
300 = Light\
400 = Normal (Regular)\
500 = Medium\
**600 = Semi Bold (Demi Bold)**\
**700 = Bold**\
800 = Extra Bold (Ultra Bold)\
900 = Black (Heavy)\
950 = Extra Black (Ultra Black)
{% endhint %}

## Google Fonts

***

### Google Fonts importieren

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• nein\
• ja

**Beispiel Wert**:\
`nein`

**Pfad zur Einstellung**:\
Tab "Layout" => Bereich "Typografie" => Abschnitt "Google Fonts"

**Technischer Name**:\
`twt-google-font-import`

{% hint style="info" %}
Wähle aus, ob Google Fonts über die Google Fonts API geladen werden sollen (ja) oder nicht (nein).

**Wichtig:** Lasse Dich vor der Nutzung von Font APIs wie z.B. Google Fonts bezüglich Datenschutz-Grundverordnung (DSGVO) rechtlich beraten.
{% endhint %}

***

### Strichstärke für Google Fonts (Text)

**Feldtyp**:\
Textfeld

**Beispiel Wert**:\
`400,600`

**Pfad zur Einstellung**:\
Tab "Layout" => Bereich "Typografie" => Abschnitt "Google Fonts"

**Technischer Name**:\
`twt-font-family-base-font-weight`

{% hint style="info" %}
Wähle die gewünschten Schriftstärken:\
100 = Thin (Hairline)\
200 = Extra Light (Ultra Light)\
300 = Light\
400 = Normal (Regular)\
500 = Medium\
600 = Semi Bold (Demi Bold)\
700 = Bold\
800 = Extra Bold (Ultra Bold)\
900 = Black (Heavy)\
950 = Extra Black (Ultra Black)

**Beispiel**: 400,600
{% endhint %}

***

### Strichstärke für Google Fonts (Überschriften)

**Feldtyp**:\
Textfeld

**Beispiel Wert**:\
`400,600`

**Pfad zur Einstellung**:\
Tab "Layout" => Bereich "Typografie" => Abschnitt "Google Fonts"

**Technischer Name**:\
`twt-font-family-headline-font-weight`

{% hint style="info" %}
Wähle die gewünschten Schriftstärken:\
100 = Thin (Hairline)\
200 = Extra Light (Ultra Light)\
300 = Light\
400 = Normal (Regular)\
500 = Medium\
600 = Semi Bold (Demi Bold)\
700 = Bold\
800 = Extra Bold (Ultra Bold)\
900 = Black (Heavy)\
950 = Extra Black (Ultra Black)

**Beispiel**: 400,600
{% endhint %}

## Iconset

**Modifizierte Icons in ThemeWare®**

Neben den Standard-Icons von Shopware bieten wir in ThemeWare® auch spezifisch gestaltete Icons, die die Standard-Icons überlagern. Diese modifizierten Icons gewährleisten eine einheitliche und markenspezifische Benutzeroberfläche. Hier sind einige der wichtigsten modifizierten Icons und deren Verwendung:

* Home-Icon (home): Modifiziert für die Startseite, erscheint in der Kopfzeile (Klasse .home-link .icon-home)
* Wunschzettel-Icon (heart): Verwendet in der Kopfzeile für die Wunschliste (Klasse .header-wishlist .icon-heart)
* Benutzer-Icon (avatar): Angepasst für das Benutzerkonto-Menü, ebenfalls in der Kopfzeile (Klasse .account-menu .icon-avatar)
* Warenkorb-Icon (cart): Zu sehen in der Kopfzeile für den Warenkorb (Klasse .header-cart .icon-bag)
* Such-Icon (search): Zwei Verwendungen in der Kopfzeile, einmal für die allgemeine Suche (Klasse .header-search-icon .icon-search) und einmal für das Flyout-Suchfeld (Klasse .header-search-toggle-icon .icon-search)
* Schließen-Icon (x): Verwendet im Flyout-Suchfeld zum Schließen (Klasse .header-search-toggle-icon .icon-x)
* Newsletter-Submit-Icon (envelope): Im Footer für das Newsletter-Formular (Klasse .footer-column-newsletter .icon-arrow-head-right)
* Hamburger-Menü-Icon (stack): Modifiziert für die mobile Navigation in der Kopfzeile (Klasse .nav-main-toggle-btn .icon-stack)
* Service-Menü-Icon (help): Verwendet in der Kopfzeile für das Hilfemenü (Klasse .top-bar-nav-btn .icon-help)

*Um diese Icons in Ihrem Shop zu sehen, können sie testweise zugewiesen werden und sind dann im Shop sichtbar.*

***

### Iconset

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• Standard (Shopware 6)\
• ThemeWare® One\
• ThemeWare® One solid (new)\
• ThemeWare® One thin (new)\
• ThemeWare® Light\
• ThemeWare® Six (new)\
• ThemeWare® Six solid (new)\
• Boxicons\
• Boxicons (Variation)\
• Boxicons solid\
• Boxicons solid (Variation)\
• Font Awesome v5\
• Font Awesome v5 (Variation)\
• Font Awesome v6\
• Font Awesome v6 (Variation)\
• Feather\
• Material Icons\
• Shopware 6

**Beispiel Wert**:\
`Standard (Shopware 6)`

**Pfad zur Einstellung**:\
Tab "Layout" => Bereich "Typografie" => Abschnitt "Iconset"

**Technischer Name**:\
`twt-iconset`

{% hint style="info" %}
Hier kannst du zwischen verschiedenen Icons-Sets wählen.

Einzelne Icons können mit separaten Konfigurationsfeldern ausgewählt werden.

**Hinweis:** Beim Icons-Set "Standard" werden die Icons nicht modifiziert und sind nicht austauschbar.
{% endhint %}

***

### Icon: Warenkorb

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• Einkaufstasche (Standard)\
• Einkaufskorb\
• Einkaufswagen

**Beispiel Wert**:\
`Einkaufstasche (Standard)`

**Pfad zur Einstellung**:\
Tab "Layout" => Bereich "Typografie" => Abschnitt "Iconset"

**Technischer Name**:\
`twt-icon-cart`

{% hint style="info" %}
Tauscht das Standard-Icon vom "Warenkorb"-Button im Header aus, sofern das Icon im gewählten Iconsset verfügbar ist.

**Hinweis:** Beim Icons-Set "Standard" wird das Icon nicht geändert.
{% endhint %}

***

### Icon: Newsletter

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• Pfeil nach rechts (Standard)\
• Briefumschlag\
• Papierflugzeug

**Beispiel Wert**:\
`Briefumschlag`

**Pfad zur Einstellung**:\
Tab "Layout" => Bereich "Typografie" => Abschnitt "Iconset"

**Technischer Name**:\
`twt-icon-newsletter-submit`

{% hint style="info" %}
Tauscht das Standard-Icon vom "Senden"-Button im Newsletter-Widget aus, sofern das Icon im gewählten Iconsset verfügbar ist.

**Hinweis:** Beim Icons-Set "Standard" wird das Icon nicht geändert.
{% endhint %}

***

### Icon: Vorteile

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• Häkchen (Standard)\
• Herz\
• Stern\
• Trophäe

**Beispiel Wert**:\
`Häkchen (Standard)`

**Pfad zur Einstellung**:\
Tab "Layout" => Bereich "Typografie" => Abschnitt "Iconset"

**Technischer Name**:\
`twt-icon-benefits`