# Typography

**Typography** allows setting the font, size of texts for the site.

1. From your Shopify admin, go to **Online Store ->** **Themes**.
2. Find the theme that you want to edit, and then click **Customize**.
3. Click **Theme Settings ->** **Typography.**

**Headings**

<table><thead><tr><th width="243">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Font</td><td>Choose from the popular Shopify Fonts <br><em>(Selecting a different font can affect the speed of your store.</em> <a href="https://help.shopify.com/manual/online-store/os/store-speed/improving-speed#fonts"><em>Learn more about system fonts.</em></a><em>)</em></td></tr><tr><td>Font size step</td><td><p>Determines the distance between 2 heading sizes option of the <strong>Heading size</strong> setting. </p><p></p><p><strong>For example:</strong> If you set <strong>Font size step</strong> is 2px and <strong>Font size (Desktop)</strong> is 42px, then on desktop version: </p><p>+ Option <strong>Medium</strong> of <strong>Heading size</strong> will be 42px.</p><p>+ Option <strong>Small</strong> of <strong>Heading size</strong> will be 42px - 2px = 40px.</p><p>+ Option <strong>Large</strong> of <strong>Heading size</strong> will be 42px + 2px = 44px.</p><p>+ Calculate same with the remaining options of <strong>Heading size.</strong></p></td></tr><tr><td>Font size (Desktop)</td><td>Determines the font size for the <strong>Medium</strong> heading size on Desktop.</td></tr><tr><td>Font size (Tablet)</td><td>Determines the font size for the <strong>Medium</strong> heading size on Tablet.</td></tr><tr><td>Font size (Mobile)</td><td>Determines the font size for the <strong>Medium</strong> heading size on Mobile.</td></tr><tr><td>Heading size</td><td><p>The size of the heading text:</p><ul><li><strong>XX-Small:</strong> is calculated by the formula</li></ul><p>        + XX-Small Desktop  = X-Small Desktop - Font size step.</p><p>        + XX-Small Tablet = X-Small Tablet - Font size step.</p><p>        + XX-Small Mobile = X-Small Mobile - Font size step.</p><ul><li><strong>X-Small:</strong> is calculated by the formula</li></ul><p>        + X-Small Desktop  = Small Desktop - Font size step.</p><p>        + X-Small Tablet = Small Tablet - Font size step.</p><p>        + X-Small Mobile = Small Mobile - Font size step.</p><ul><li><strong>Small:</strong> is calculated by the formula</li></ul><p>        + Small Desktop = Medium Desktop - Font size step.</p><p>        + Small Tablet = Medium Tablet - Font size step.</p><p>        + Small Mobile = Medium Mobile - Font size step.</p><ul><li><p><strong>Medium:</strong> </p><p> <em><mark style="color:blue;">+ Medium Desktop = Font size (Desktop).</mark></em></p><p> <em><mark style="color:blue;">+ Medium Tablet = Font size (Tablet).</mark></em></p><p> <em><mark style="color:blue;">+ Medium Mobile = Font size (Mobile).</mark></em></p></li><li><strong>Large:</strong> is calculated by the formula</li></ul><p>         + Large Desktop = Medium Desktop + Font size step.</p><p>         + Large Tablet = Medium Tablet + Font size step.</p><p>         + Large Mobile = Medium Mobile + Font size step.</p><ul><li><strong>X-Large:</strong> is calculated by the formula</li></ul><p>         + X-Large Desktop = Large Desktop + Font size step.</p><p>         + X-Large Tablet = Large Tablet + Font size step.</p><p>         + X-Large Mobile = Large Mobile + Font size step.</p><ul><li><strong>XX-Large:</strong> is calculated by the formula</li></ul><p>         + XX-Large Desktop = X-Large Desktop + Font size step.</p><p>         + XX-Large Tablet = X-Large Tablet + Font size step.</p><p>         + XX-Large Mobile = X-Large Mobile + Font size step.</p><ul><li><strong>XXX-Large:</strong> is calculated by the formula</li></ul><p>         + XXX-Large Desktop = XX-Large Desktop + Font size step.</p><p>         + XXX-Large Tablet = XX-Large Tablet + Font size step.</p><p>         + XXX-Large Mobile = XX-Large Mobile + Font size step.</p><p></p></td></tr><tr><td>Heading letter spacing</td><td>Determines the letter spacing of heading. Can be from -5% to 10%, increasing arithmetically of 5%.</td></tr></tbody></table>

**Body**

<table><thead><tr><th width="242">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Font</td><td>Choose from the popular Shopify Fonts <br><em>(Selecting a different font can affect the speed of your store.</em> <a href="https://help.shopify.com/manual/online-store/os/store-speed/improving-speed#fonts"><em>Learn more about system fonts.</em></a><em>)</em></td></tr><tr><td>Font size step</td><td><p>Determines the distance between 2 text sizes option of the <strong>Text size</strong> setting. </p><p></p><p><strong>For example:</strong> If you set <strong>Font size step</strong> is 2px and <strong>Font size (Desktop)</strong> is 16px, then on desktop version: </p><p>+ Option <strong>Medium</strong> of <strong>Text size</strong> will be 16px.</p><p>+ Option <strong>Small</strong> of <strong>Text size</strong> will be 16px - 2px = 14px.</p><p>+ Option <strong>Large</strong> of <strong>Text size</strong> will be 16px + 2px = 18px.</p><p>+ Calculate same with the remaining options of <strong>Text size.</strong></p></td></tr><tr><td>Font size (Desktop)</td><td>Determines the font size for the <strong>Medium</strong> text size on Desktop.</td></tr><tr><td>Font size (Tablet)</td><td>Determines the font size for the <strong>Medium</strong> text size on Tablet.</td></tr><tr><td>Font size (Mobile)</td><td>Determines the font size for the <strong>Medium</strong> text size on Mobile.</td></tr><tr><td>Text size</td><td><p>The size of the text:</p><ul><li><strong>XX-Small:</strong> is calculated by the formula</li></ul><p>        + XX-Small Desktop  = X-Small Desktop - Font size step.</p><p>        + XX-Small Tablet = X-Small Tablet - Font size step.</p><p>        + XX-Small Mobile = X-Small Mobile - Font size step.</p><ul><li><strong>X-Small:</strong> is calculated by the formula</li></ul><p>        + X-Small Desktop  = Small Desktop - Font size step.</p><p>        + X-Small Tablet = Small Tablet - Font size step.</p><p>        + X-Small Mobile = Small Mobile - Font size step.</p><ul><li><strong>Small:</strong> is calculated by the formula</li></ul><p>        + Small Desktop = Medium Desktop - Font size step.</p><p>        + Small Tablet = Medium Tablet - Font size step.</p><p>        + Small Mobile = Medium Mobile - Font size step.</p><ul><li><strong>Medium:</strong></li></ul><p>         <em><mark style="color:blue;">+ Medium Desktop = Font size (Desktop).</mark></em></p><p>         <em><mark style="color:blue;">+ Medium Tablet = Font size (Tablet).</mark></em></p><p>         <em><mark style="color:blue;">+ Medium Mobile = Font size (Mobile).</mark></em></p><ul><li><strong>Large:</strong> is calculated by the formula</li></ul><p>         + Large Desktop = Medium Desktop + Font size step.</p><p>         + Large Tablet = Medium Tablet + Font size step.</p><p>         + Large Mobile = Medium Mobile + Font size step.</p><ul><li><strong>X-Large:</strong> is calculated by the formula</li></ul><p>         + X-Large Desktop = Large Desktop + Font size step.</p><p>         + X-Large Tablet = Large Tablet + Font size step.</p><p>         + X-Large Mobile = Large Mobile + Font size step.</p><ul><li><strong>XX-Large:</strong> is calculated by the formula</li></ul><p>         + XX-Large Desktop = X-Large Desktop + Font size step.</p><p>         + XX-Large Tablet = X-Large Tablet + Font size step.</p><p>         + XX-Large Mobile = X-Large Mobile + Font size step.</p><ul><li><strong>XXX-Large:</strong> is calculated by the formula</li></ul><p>         + XXX-Large Desktop = XX-Large Desktop + Font size step.</p><p>         + XXX-Large Tablet = XX-Large Tablet + Font size step.</p><p>         + XXX-Large Mobile = XX-Large Mobile + Font size step.</p></td></tr></tbody></table>

## How to set up Shopify Font?

Shopify's font library is a [collection of fonts](https://shopify.dev/themes/architecture/settings/fonts#available-fonts) that includes system fonts, a selection of Google fonts, and licensed fonts from [Monotype](https://www.monotype.com/). These fonts are free to use on all Shopify online stores, and are provided in both [WOFF](https://caniuse.com/#feat=woff) and [WOFF2](https://caniuse.com/#feat=woff2) formats.


---

# 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://halosoft.gitbook.io/concept-documentation/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.