> 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.

Für mehr Informationen zur Schriftkonfiguration, schaue dir unser Video-Tutorial an.

**Beispiel**: 'Inter', sans-serif
{% 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.

Für mehr Informationen zur Schriftkonfiguration, schaue dir unser Video-Tutorial an.

**Beispiel**: 'Inter', sans-serif
{% 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`