# 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`


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://doku.themeware.design/handbuch/layout/typografie/konfiguration.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.