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

# Typography

The theme includes a dedicated customization panel that lets you fine-tune the appearance of every site element. You can easily adjust text fonts, styles, and sizes to match your brand’s look.

{% hint style="success" %}
Steps

1. In the theme editor (**Customize**), click **Theme settings**
2. Locate **Typography**
3. Make necessary changes
4. **Save**
   {% endhint %}

Typography is one of the key factors that define the **overall look and feel** of a website. It includes the following elements:

#### **1. Font Source**

Choose where your fonts come from:

* **Shopify:** Use the fonts available in the Shopify font library.
* **Google:** Use fonts from [Google Fonts](https://fonts.google.com).
*

```
<figure><img src="/files/AAg5jn2n1xwiBVa42BZ3" alt=""><figcaption></figcaption></figure>
```

***

#### **2. Body Font**

* **Shopify font / Google font name:** Select the main font used for body text.
* **Font size:** Adjust the size of the regular text.
* **Font weight:** Set the text thickness (e.g., 400 = regular, 500 = medium).
* **Line height:** Define the spacing between lines of text.
* **Border radius:** Customize the rounded corners of certain elements if applicable.
*

```
<figure><img src="/files/BqK2EmTjFWLVDhskvKaA" alt=""><figcaption></figcaption></figure>
```

***

#### **3. Headings Font (H1–H6)**

* **Shopify font / Google font name:** Choose the font for all headings (H1–H6).
* **Font size H1–H6:** Set individual sizes for each heading level.
* **Font weight:** Control the boldness of headings.
* **Line height:** Adjust vertical spacing for heading text.
* **Letter spacing:** Modify the spacing between characters for headings.
*

```
<figure><img src="/files/I6EPx0t1qOzJW7VJKrNc" alt=""><figcaption></figcaption></figure>
```

***

#### **4. Menu Font**

* **Shopify font / Google font name:** Choose the font for your navigation menu.
* **Font size / Font weight:** Control the appearance of main menu items.
* **Font size sub / Font weight sub:** Adjust font settings for submenu items.
* **Letter spacing:** Modify spacing between menu letters for better readability.
*

```
<figure><img src="/files/kfhwPF7oNjmgHSLYK0mu" alt=""><figcaption></figcaption></figure>
```

#### **5. Button Settings**

Customize the appearance of buttons across your website to match your store’s design and brand identity.

* **Uppercase text label:** Toggle this option to display all button text in uppercase letters.
* **Font size:** Adjust the text size inside buttons.
* **Letter spacing:** Control the spacing between letters in button text.
* **Border width:** Define the thickness of the button border.
* **Border radius:** Adjust the roundness of button corners.
* **Line height:** Set the height of the button area, affecting overall button size.
* **Font weight:** Determine how bold the button text appears.

<figure><img src="https://370739323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUoKuJAeox3jObJjxBdwE%2Fuploads%2FMr40YM0lcGAMb9F71u1l%2Fbutton.png?alt=media&amp;token=eac4edc4-8ab9-4bdb-99fa-ccda544745c1" alt=""><figcaption></figcaption></figure>

***

#### **6. Input Settings**

These settings control the styling of input fields, such as text boxes or forms, throughout your store.

* **Thickness:** Adjust the border thickness of input fields.
* **Font size:** Set the text size inside input fields.
* **Border radius:** Customize how rounded the corners of input boxes appear.
* **Line height:** Define the height or vertical spacing within the input field.
* **Font weight:** Set the weight or boldness of the input text.

<figure><img src="https://370739323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUoKuJAeox3jObJjxBdwE%2Fuploads%2FFHZvB5dx377A4o0dQikl%2Finput.png?alt=media&amp;token=eddc95e9-b012-4c22-81d7-a88b19d71b72" alt=""><figcaption></figcaption></figure>