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