# Typografie

Übersicht

In diesem Abschnitt findest du alles was mit dem Schriftbild deines Online Shops zu tun hat. So kannst du hier Fließtext, Überschriften und Links nach deinen Vorstellungen anpassen. 

### Konfiguration

<figure><img src="/files/1jKGS20M8ZtIQdgYHldB" alt=""><figcaption></figcaption></figure>

<details>

<summary>Schriftart Text</summary>

An dieser Stelle hinterlegst du die Schriftart für deinen Fließtext. Der Name der Schriftart muss hierbei in einfachen Anführungszeichen stehen. Standardmäßig ist hier die Schriftart 'Open Sans' integriert.

Anschließen empfiehlt es sich immer kommagetrennt mit `system-ui, sans-serif` oder `system-ui, serif` abzuschließen. Dies ist die Browser Ausweichschriftart, falls die eigentliche Schriftart nicht geladen werden konnte. Je nachdem ob du eine serifen oder serifenlose Schriftart hinterlegst, wählst du den entsprechenden Wert.

***

Bitte beachte, dass sich die Schriftart, welche du verwenden möchtest, auch auf deinem Server befindet. Diese lässt sich entweder händisch oder mit einer App aus dem Shopware Store hochladen. Eine direkte Einbindung über einen Google Link empfehlen wir aus datenschutzrechtlichen Gründen nicht. Voreingestellte verfügbare Schriftarten sind: 'Open Sans', 'Raleway' und 'Inter'.

</details>

<details>

<summary>Textfarbe</summary>

Dies ist die verwendete Schriftfarbe für deinen Fließtext im Shop.

***

[Variable:](/academy/fachbegriffe/variable.md) `$sw-text-color`

</details>

<details>

<summary>Schriftart Überschrift</summary>

An dieser Stelle hinterlegst du die Schriftart für deine Überschriften. Der Name der Schriftart muss hierbei in einfachen Anführungszeichen stehen. Standardmäßig ist hier die Schriftart 'Raleway' integriert.

Anschließen empfiehlt es sich immer kommagetrennt mit `system-ui, sans-serif` oder `system-ui, serif` abzuschließen. Dies ist die Browser Ausweichschriftart, falls die eigentliche Schriftart nicht geladen werden konnte. Je nachdem ob du eine serifen oder serifenlose Schriftart hinterlegst, wählst du den entsprechenden Wert.

***

Bitte beachte, dass sich die Schriftart, welche du verwenden möchtest, auch auf deinem Server befindet. Diese lässt sich entweder händisch oder mit einer App aus dem Shopware Store hochladen. Eine direkte Einbindung über einen Google Link empfehlen wir aus datenschutzrechtlichen Gründen nicht. Voreingestellte verfügbare Schriftarten sind: 'Open Sans', 'Raleway' und 'Inter'.

</details>

<details>

<summary>Überschriftfarbe</summary>

Dies ist die verwendete Schriftfarbe für deine Überschriften im Shop.

***

[Variable:](/academy/fachbegriffe/variable.md) `$sw-headline-color`

</details>

<details>

<summary>Link Style</summary>

Das Theme bietet dir die Möglichkeit deine Links in unterschiedlichen Designs darzustellen. Diese wirken sich ins besondere auf den [Hover-Effekt](/academy/fachbegriffe/hover-effekt.md) aus. Diesen kannst du dir bspw. auf der [Produkt Detailseite](/academy/fachbegriffe/produkt-detailseite.md) am Hinweis "Preise inkl. MwSt. zzgl. Versandkosten" ansehen.

***

Unterstrichen:

<img src="/files/BzeOjDGnzLdOEJ6b96Wm" alt="Katana" data-size="original">

Unterstrichen mit Animation:

<img src="/files/8UW4POO0btYz03TiBmKu" alt="Bonsai" data-size="original">

</details>

<details>

<summary>Link Farbe</summary>

Dies ist die verwendete Schriftfarbe für deine Links im Shop.

***

[Variable:](/academy/fachbegriffe/variable.md) `$atl-link-color`

</details>

<details>

<summary>Link Dekorations Farbe</summary>

Die Link Dekorations Farbe stellt die Farbe der Unterstreichung deiner Links dar.

</details>

<details>

<summary>Kontrast Schwellenwert</summary>

Das Kontrastverhältnis bestimmt, wann die Helligkeit der Farbe von "dunkel" zu "hell" wechselt.&#x20;

Akzeptable Werte der Web Content Accessibility Guidelines (WCAG) 2.0 sind 3, 4.5 und 7. Dieser Wert berechnet, wann eine Vordergrundfarbe auf einem Hintergrund "dunkel" oder "hell" dargestellt wird. Beispielsweise errechnet sich so die Textfarbe auf einem Primärbutton.

<img src="/files/fmNOuFmENMfkTzD9cOfs" alt="" data-size="original">

</details>


---

# 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://docs.atloss.de/theme-konfiguration/allgemein/typografie.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.