# Fonts

Select and customize **fonts** used for text in Studio sections. Font settings are available for headings, body, subheadings, badges, and prices.

{% hint style="info" %}
All fonts are provided by Shopify's font picker. Learn more about [fonts supported by Shopify](https://shopify.dev/themes/architecture/settings/fonts#available-fonts).
{% endhint %}

***

In the theme editor, click the **Fonts** block under **Section Studio** • **Global styles**

### Headings

<table data-header-hidden><thead><tr><th width="239.18853759765625" valign="top">Setting</th><th valign="top">Options</th><th data-hidden></th></tr></thead><tbody><tr><td valign="top"><mark style="color:blue;">Font</mark></td><td valign="top"><mark style="color:$info;">Select font for all headings.</mark></td><td></td></tr><tr><td valign="top"><mark style="color:blue;">Base font size</mark></td><td valign="top"><mark style="color:$info;">16 - 80px</mark></td><td></td></tr><tr><td valign="top"><mark style="color:blue;">Line height</mark></td><td valign="top"><mark style="color:$info;">80 - 150%</mark></td><td></td></tr><tr><td valign="top"><mark style="color:blue;">Letter spacing</mark></td><td valign="top"><mark style="color:$info;">80 - 150%</mark></td><td>Use the slider to increase or decrease space between letters.</td></tr><tr><td valign="top"><mark style="color:blue;">Uppercase</mark></td><td valign="top"><mark style="color:$info;">Display headings in all uppercase letters.</mark></td><td>Display all headings in uppercase letters. Toggle off to use the casing of the text as entered in the heading fields.</td></tr><tr><td valign="top"><mark style="color:blue;">Mobile size scale</mark></td><td valign="top"><mark style="color:$info;">50 - 100%</mark></td><td></td></tr><tr><td valign="top"><mark style="color:blue;">Desktop scale ratio</mark></td><td valign="top"><mark style="color:$info;">100 - 150%</mark></td><td></td></tr><tr><td valign="top"><mark style="color:blue;">Mobile scale ratio</mark></td><td valign="top"><mark style="color:$info;">100 - 150%</mark></td><td></td></tr></tbody></table>

### Body

<table data-header-hidden><thead><tr><th width="240.19195556640625" valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top"><mark style="color:blue;">Font</mark></td><td valign="top"><mark style="color:$info;">Select font for all body text.</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Base font size</mark></td><td valign="top"><mark style="color:$info;">14 - 20 px</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Line height</mark></td><td valign="top"><mark style="color:$info;">100 - 160 %</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Letter spacing</mark></td><td valign="top"><mark style="color:$info;">90 - 120 %</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Mobile size scale</mark></td><td valign="top"><mark style="color:$info;">50 - 100 %</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Desktop scale ratio</mark></td><td valign="top"><mark style="color:$info;">100 - 150 %</mark></td></tr><tr><td valign="top"><mark style="color:blue;">Mobile scale ratio</mark></td><td valign="top"><mark style="color:$info;">100 - 150 %</mark></td></tr></tbody></table>

### Subheadings

<table data-header-hidden><thead><tr><th width="240.27978515625" valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top"><mark style="color:blue;">Font</mark></td><td valign="top">Apply <strong>Heading</strong> or <strong>Body</strong> font to all subheadings.</td></tr></tbody></table>

### Badges

<table data-header-hidden><thead><tr><th width="240.1263427734375" valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top"><mark style="color:blue;">Font</mark></td><td valign="top">Apply <strong>Heading</strong> or <strong>Body</strong> font to all badge text.</td></tr></tbody></table>

### Prices

<table data-header-hidden><thead><tr><th width="239.84075927734375" valign="top"></th><th valign="top"></th></tr></thead><tbody><tr><td valign="top"><mark style="color:blue;">Font</mark></td><td valign="top">Apply <strong>Heading</strong> or <strong>Body</strong> font to all product prices.</td></tr></tbody></table>

### Buttons

Font settings for **buttons** are found in **Global styles > Buttons.**

{% content-ref url="buttons" %}
[buttons](https://help.fluorescent.co/section-studio/sections/global-styles/buttons)
{% endcontent-ref %}