# Typography

### Overview

In this section, you will find everything related to the typeface of your online shop. Here, you can customize continuous text, headings, and links according to your preferences.

### Configuration

<figure><img src="https://content.gitbook.com/content/33GKvYy9I8ydtLM82CBS/blobs/AiqOIzX2CWvDHkFPfLpr/typografie.webp" alt=""><figcaption></figcaption></figure>

<details>

<summary>Font Text</summary>

Here you can select the font for your body text. The font name must be enclosed in single quotation marks. The default font is ‘Open Sans’.

It is always recommended to end with `system-ui, sans-serif` or `system-ui, serif` separated by commas. This is the browser's fallback font if the actual font could not be loaded. Depending on whether you use a serif or sans-serif font, select the appropriate value.

***

Please note that the font you want to use must also be located on your server. It can be uploaded either manually or using an app from the Shopware Store. For data protection reasons, we do not recommend direct integration via a Google link. The default fonts available are: ‘Open Sans’, ‘Raleway’ and ‘Inter’.

</details>

<details>

<summary>Font Color</summary>

This is the font color used for your body text in the shop.

***

[Variable:](https://docs.atloss.de/en/academy/technical-terms/variable) `$sw-text-color`

</details>

<details>

<summary>Font Heading</summary>

Here you can specify the font for your headings. The font name must be enclosed in single quotation marks. The default font is ‘Raleway’.

It is always recommended to end with a comma-separated list of `system-ui, sans-serif`, or `system-ui, serif`. This is the browser's fallback font if the actual font cannot be loaded. Depending on whether you are using a serif or sans-serif font, select the appropriate value.

***

Please note that the font you want to use must also be located on your server. It can be uploaded either manually or using an app from the Shopware Store. For data protection reasons, we do not recommend direct integration via a Google link. The default fonts available are: ‘Open Sans’, ‘Raleway’ and ‘Inter’.

</details>

<details>

<summary>Heading color</summary>

This is the font color used for your headings in the shop.

***

[Variable:](https://docs.atloss.de/en/academy/technical-terms/variable) `$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](https://docs.atloss.de/en/academy/technical-terms/hover-effekt) aus. Diesen kannst du dir bspw. auf der [Produkt Detailseite](https://docs.atloss.de/en/academy/technical-terms/product-detail-page) am Hinweis "Preise inkl. MwSt. zzgl. Versandkosten" ansehen.

The theme offers you the option of displaying your links in different designs. These have a particular effect on the [hover effect](https://docs.atloss.de/en/academy/technical-terms/hover-effekt). You can see this, for example, on the [product detail page](https://docs.atloss.de/en/academy/technical-terms/product-detail-page) in the note “Prices include VAT plus shipping costs.”

***

Underline:

<img src="https://content.gitbook.com/content/33GKvYy9I8ydtLM82CBS/blobs/XYfCo9BiVaWbkfAPjF3m/katana-link-hover.gif" alt="Katana" data-size="original">

Underline with animation:

<img src="https://content.gitbook.com/content/33GKvYy9I8ydtLM82CBS/blobs/jIMpuaKfzSZ4Rj1eqygG/bonsai-link-hover.gif" alt="Bonsai" data-size="original">

</details>

<details>

<summary>Link Color</summary>

This is the font color used for your links in the shop.

***

[Variable:](https://docs.atloss.de/en/academy/technical-terms/variable) `$atl-link-color`

</details>

<details>

<summary>Link Decoration Color</summary>

The link decoration color represents the color of the underlining of your links.

</details>

<details>

<summary>Contrast threshold</summary>

The contrast ratio determines when the brightness of the color changes from “dark” to “light.”

Acceptable values for Web Content Accessibility Guidelines (WCAG) 2.0 are 3, 4.5, and 7. This value calculates when a foreground color is displayed as “dark” or “light” on a background. For example, this is how the text color on a primary button is calculated.

<img src="https://content.gitbook.com/content/33GKvYy9I8ydtLM82CBS/blobs/7H48Ippcwl3iuyYyINkE/typografie-kontrast-schwellenwert.webp" alt="" data-size="original">

</details>