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