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