> For the complete documentation index, see [llms.txt](https://help.fluorescent.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.fluorescent.co/stiletto/theme-styles/fonts.md).

# Typography

{% hint style="info" %}
Typography settings were updated in 6.0.0 and later. Learn how to [update your theme](/stiletto/general/theme-updates.md) to access new features.
{% endhint %}

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 <i class="fa-gear">:gear:</i> **Theme settings** open the **Typography** 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 %}

### Font elements

Font settings are available for the following elements across your site.

<table><thead><tr><th width="145">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:$primary;">Logo</mark></td><td><p>Your store name in the Header (when no logo image).<br></p><ul><li>Font</li><li>Uppercase</li><li>Letter spacing</li><li>Desktop font size</li><li>Mobile font size</li></ul></td></tr><tr><td><mark style="color:$primary;">Body</mark></td><td><p>All remaining text including body text, navigation (menu items), product listing title, and button text.<br></p><ul><li>Font</li><li>Uppercase</li><li>Letter spacing</li><li>Desktop font size</li><li>Mobile font size</li></ul></td></tr><tr><td><mark style="color:$primary;">Headings</mark></td><td><p>All heading and subheading text.<br><br></p><ul><li>Font</li><li>Uppercase</li><li>Letter spacing</li><li>Desktop font size</li><li>Mobile font size</li></ul></td></tr><tr><td><mark style="color:$primary;">Display headings</mark></td><td><p><br></p><ul><li>Display font size</li><li>Mobile font size</li></ul></td></tr><tr><td><mark style="color:$primary;">Subheadings</mark></td><td><p><br><br></p><ul><li>Font</li><li>Font weight</li><li>Uppercase</li><li>Letter spacing</li></ul></td></tr><tr><td><mark style="color:$primary;">Navigation</mark></td><td><p><br><br></p><ul><li>Font</li><li>Font weight</li><li>Uppercase</li><li>Letter spacing</li><li>Font size</li><li>Apply styles to mega menu links</li></ul></td></tr><tr><td><mark style="color:$primary;">Mobile navigation</mark></td><td><p><br><br></p><ul><li>Font</li><li>Font weight</li><li>Uppercase</li><li>Uppercase secondary menu</li><li>Apply letter spacing to uppercase links only</li><li>Font size</li><li>Secondary menu font size</li></ul></td></tr><tr><td><mark style="color:$primary;">Product listing titles</mark></td><td><p><br></p><ul><li>Font</li><li>Font weight</li><li>Uppercase</li><li>Letter spacing</li><li>Desktop font size</li><li>Mobile font size</li></ul></td></tr><tr><td><mark style="color:$primary;">Buttons</mark></td><td><ul><li>Font</li><li>Font weight</li><li>Uppercase</li><li>Letter spacing</li><li>Desktop font size</li><li>Mobile font size</li></ul></td></tr></tbody></table>

### Font settings

The following font settings are available for the above font elements across your site.

<table><thead><tr><th width="201">Uppercase</th><th>Display font in all uppercase letters.</th></tr></thead><tbody><tr><td><mark style="color:$primary;">Desktop font size</mark></td><td>Use the slider to increase or decrease the font size in pixels.</td></tr><tr><td><mark style="color:$primary;">Mobile font size scale</mark></td><td>Use the slider to increase or decrease the font size on mobile as a percentage of the base font size.</td></tr><tr><td><mark style="color:$primary;">Letter spacing</mark></td><td>Use the slider to increase or decrease space between letters.</td></tr><tr><td><mark style="color:$primary;">Uppercase</mark></td><td>Display text in all uppercase letters or use the casing of the text as entered.</td></tr></tbody></table>

<br>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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/stiletto/theme-styles/fonts.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.