> For the complete documentation index, see [llms.txt](https://highfivethemes.gitbook.io/spotlight-user-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://highfivethemes.gitbook.io/spotlight-user-documentation/custom-settings/typography.md).

# Typography

### <mark style="color:purple;">**Spotlight**</mark> has 4 variants of font-pairings:

1. Sans-serif (default)
2. Serif
3. Technology
4. Minimalism

This setting changes fonts for headings, body, buttons and navigation depending on the selected font-pairing.&#x20;

## To customize:

1. Go to **Settings > Design & branding** from the admin menu
2. Click **Site-wide** in the **Design** settings sidebar on the right
3. Click and select your preferred font-pairing in the **Typography** menu item

## Font-families:

### Sans-serif

Font-family **headings**:

{% code overflow="wrap" %}

```css
-apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
```

{% endcode %}

Font-family **body**:

{% code overflow="wrap" %}

```css
-apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
```

{% endcode %}

Font-family **buttons**:

{% code overflow="wrap" %}

```css
-apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
```

{% endcode %}

Font-family **navigation**:

{% code overflow="wrap" %}

```css
-apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
```

{% endcode %}

### Serif

Font-family **headings**:

```css
'Gloock', serif;
```

Font-family **body**:

```
'Instrument Sans', sans-serif;
```

Font-family **buttons**:

{% code overflow="wrap" %}

```css
'Instrument Sans', sans-serif;
```

{% endcode %}

Font-family **navigation**:

{% code overflow="wrap" %}

```css
'Instrument Sans', sans-serif;
```

{% endcode %}

### Technology

Font-family **headings**:

```css
'Plus Jakarta Sans', sans-serif;
```

Font-family **body**:

```
'Plus Jakarta Sans', sans-serif;
```

Font-family **buttons**:

{% code overflow="wrap" %}

```css
'Plus Jakarta Sans', sans-serif;
```

{% endcode %}

Font-family **navigation**:

{% code overflow="wrap" %}

```css
'DM Sans', sans-serif;
```

{% endcode %}

### Minimalism

Font-family **headings**:

```css
'DM Sans', sans-serif;
```

Font-family **body**:

```
'DM Sans', sans-serif;
```

Font-family **buttons**:

{% code overflow="wrap" %}

```css
'DM Sans', sans-serif;
```

{% endcode %}

Font-family **navigation**:

{% code overflow="wrap" %}

```css
'DM Sans', sans-serif;
```

{% endcode %}