> For the complete documentation index, see [llms.txt](https://mpithemes.gitbook.io/shella-shopify-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://mpithemes.gitbook.io/shella-shopify-theme/theme-settings/typography.md).

# Typography

{% hint style="info" %}
**Theme settings -> Typography**
{% endhint %}

## Body

 In this section, you can change the font of the body’s content by choosing the one you like from the **“Base font family”** list:

![](/files/-Mf2sY3V2Xk-0mk2gzIn)

 If you want to choose a different font for headings, buttons, inputs, or menu, disable the option **“Apply font to all elements ignoring everything except alternate font”**:

![](/files/-Mf2tDRR1yDsnqRlz6Pj)

 In the dropdown list **“Load additional style”**, you can choose an additional style for the font family**:** Bold, Italic, Bold & italic, Bold italic. Choose “None” if you do not want to apply any style.

 On the **“Base font size”** scale from 10 to 60 px, you can choose the size of the base font.

## Heading

 Here you can customize the font for the headings in your store. In the **“Font family”**, you can change the font of all your headings:

![](/files/-Mf2ucrahOd4woQ4aONP)

 In the dropdown list **“Load additional style”**, you can choose an additional style for the font family**:** Bold, Italic, Bold & italic, Bold italic. Choose “None” if you do not want to apply any style.

 On the **“Promo box large text size, h1”** and **“Promo box text size, h2”** scales from 10 to 100 px you can change the size of the text in banners.

 We chose the Type #1 v1 (Text over the image) for the Promo box (Banner) in the "Layout" block. And changed the h1 to 44 px. And this is what we have got:

![](/files/-Mf3-9BL67i9UOtU8URq)

 And for this example, we chose the Type #1 v17 for the Promo box (Banner) in the "Layout" block:

![](/files/-Mg5sA59Cz0YcPc57EsR)

 On the **“Page title size, h3”** scale from 10 to 60 px, you can change the size of the title on pages:

![](/files/-Mf30Z8hHQf3RloczWbK)

 On the **“Section title size, h4”** scale from 10 to 60 px, you can change the size of the section’s title on any page:

![](/files/-Mf312syVikps_GwxSTP)

 On the **“Menus title size, h5”** scale from 10 to 60 px you can change the size of the menu’s title on any page:

![](/files/-Mf30u2h5-28LcwgWpxZ)

 On the **“Highlighted text size, h6”** scale from 10 to 60 px you can change the size of the product title and product type in collections:

![](/files/-Mf33_5f1R2W9StOvd_I)

## Button & Input

 In the **“Button font family”**, you can change the font of the buttons:

![](/files/-Mf8-KBkkr2-ORwC2PNF)

 On the **“Button font size”** scale from 10 to 60 px, you can change the size of the button text. On the **“Input font size”** scale from 10 to 60 px, you can change the size of the input, e.g.: placeholder’s text:

![](/files/-Mf8-MS-LQ2pqCn9PCQc)

## Menu

  In this section, you can change the font of the menu by simply selecting the proper one from the list in the **“Font family”:**

![](/files/-Mg5hw4iXkPmn3NMAoR-)

 On the **“First level font size”** scale from 10 to 60 px, you can change the size of the menu text on the first level:

![](/files/-Mg5hj8Xy5-Bpse83KC6)

  On the **“List font size”** scale from 10 to 60 px, you can change the size of the font in the menu list:

![](/files/-Mg5i0E22ZgGPNFfD9yC)

 On the **“Title font size”** scale from 10 to 60 px, you can change the size of the font in the titles of the menu:

![](/files/-Mg5i2UmE4LcBWtOCNSw)

 On the **“Mobile menu font size”** scale from 10 to 60 px, you can change the menu font size for the mobile version.

## Alternative font family

 In this section, you can add the class 'ff-alternative' to any element to apply this font family.

 You can change the font of the element by choosing the one you like from the **“Font family”** list.

 In the dropdown list **“Load additional style”**, you can choose an additional style for the font family**:** Bold, Italic, Bold & italic, Bold italic. Choose “None” if you do not want to apply any style.