# Fonts

A wide selection of **Fonts** are available for the logo, headings, body text, and buttons. These fonts are applied site-wide. All fonts are provided by Shopify's font picker. See a full list of [fonts supported by Shopify](https://shopify.dev/themes/architecture/settings/fonts#available-fonts).

In the theme editor, click the **Theme settings** icon, then click to open the **Fonts** tab.

{% hint style="info" %}
See our blog post on [Choosing the best font pairings for your store](https://fluorescent.co/blog/font-pairing) for helpful tips and some handpicked examples.
{% endhint %}

## Headings

***

Select the font for headings of sections and pages.

<table><thead><tr><th width="190">Setting</th><th width="400">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Casing</mark></td><td>Display text in all uppercase letters or use the casing of the text as entered in the heading fields.</td><td><strong>Normal</strong><br><strong>Uppercase</strong></td></tr><tr><td><mark style="color:blue;">Letter spacing</mark></td><td>Adjust the space between letters for headings of sections and pages</td><td><strong>-2.5 - 2.5</strong></td></tr><tr><td><mark style="color:blue;">Desktop font size</mark></td><td>The font size (in pixels) for section and page headings.</td><td><strong>24 - 72</strong></td></tr><tr><td><mark style="color:blue;">Mobile font size scale</mark></td><td>Adjust the heading text size on mobile as a percentage of the desktop size. Set it to `100%` to use the same text size as desktop.</td><td><strong>50 - 100</strong></td></tr></tbody></table>

## Body text

***

Select a font for body text and descriptions.

<table><thead><tr><th width="190">Setting</th><th width="400">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Casing</mark></td><td>Display text in all uppercase letters or use the casing of the text as entered.</td><td><strong>Normal</strong><br><strong>Uppercase</strong></td></tr><tr><td><mark style="color:blue;">Letter spacing</mark></td><td>Adjust the space between letters for body text and descriptions.</td><td><strong>-2.5 - 2.5</strong></td></tr><tr><td><mark style="color:blue;">Desktop font size</mark></td><td>The font size (in pixels) for body text and labels.</td><td><strong>15 - 22</strong></td></tr><tr><td><mark style="color:blue;">Mobile font size scale</mark></td><td>Adjust the body text size on mobile as a percentage of the desktop size. Set it to `100%` to use the same text size as desktop.</td><td><strong>50 - 100</strong></td></tr></tbody></table>

## Navigation

***

Select a font for navigation text and menu links in the header.

<table><thead><tr><th width="190">Setting</th><th width="400">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Casing</mark></td><td>Display text in all uppercase letters or use the casing of the text as entered.</td><td><strong>Normal</strong><br><strong>Uppercase</strong></td></tr><tr><td><mark style="color:blue;">Letter spacing</mark></td><td>Adjust the space between letters for navigation text and menu links in the header.</td><td><strong>-2.5 - 2.5</strong></td></tr><tr><td><mark style="color:blue;">Desktop font size</mark></td><td>The font size (in pixels) for navigation links in the header.</td><td><strong>24 - 72</strong></td></tr></tbody></table>

## Buttons

***

Select a font for all button labels.

<table><thead><tr><th width="190">Setting</th><th width="400">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Casing</mark></td><td>Display text in all uppercase letters or use the casing of the text as entered.</td><td><strong>Normal</strong><br><strong>Uppercase</strong></td></tr><tr><td><mark style="color:blue;">Letter spacing</mark></td><td>Adjust the space between letters in button labels.</td><td><strong>-2.5 - 2.5</strong></td></tr></tbody></table>


---

# 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://help.fluorescent.co/eclipse/theme-settings/typography.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.