# Typography

{% 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 considered one of the essential components that impact the website's look and feel.  This article will show you how to edit your store typography.

## **Body text and Heading**

You can choose between many existing fonts from the library.

The font that displays on your customer's computer depends on their operating system.

### Body text

Choose the **Font**, then adjust the **Base size** and **Bolder font weigh** for highlight certain titles and labels.

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2Fd1TLlRTWgTHtYU7znH8r%2Ftypo-body.png?alt=media&#x26;token=bb9d2370-4c90-4913-a937-6c49cd5b783a" alt=""><figcaption></figcaption></figure>

To learn more about system font, see [Shopify Manuals](https://help.shopify.com/en/manual/online-store/store-speed/improving-speed#fonts).

### Headings

Choose the **Font**, then adjust the **Font size, Mobile font size scale** and **Letter spacing** on the mobile view. You also have the option to enable/disable **Uppercase headings** if necessary.

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FWRC9Ul4JtWMZQYse4VYp%2Ftypo-head.png?alt=media&#x26;token=3e2f7327-fd9d-41f6-b4d1-5a3ffdc4b51c" alt=""><figcaption></figcaption></figure>

### Display headings

Set the **Base size** for headings and enable/disable **Uppercase display headings**.

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2F2N6nWi3MHDrv0IFu5xUi%2Ftypo-headings.png?alt=media&#x26;token=5f181f50-695d-4237-a190-9b76d606f31e" alt=""><figcaption></figcaption></figure>

### Subheadings

Set the **Font size scale** for **Subheadings** and **c**hoose the font as **Body font**/**Headings font** and the **Font weight.**

You can also adjust the **Letter spacing** and the **Text transform** as Normal, Title case, UPPER CASE, lowercase.

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FKwiq4Vm1apk6qCHHIM4h%2Ftypo-sub.png?alt=media&#x26;token=b2b0da53-b07d-4115-b3f5-f436ad603009" alt=""><figcaption></figcaption></figure>

## Product cards title

To set the **Font size scale**, **Font family** and **Font weight** for your [Product card](https://docs.foxecom.com/sleek-theme/theme-settings/product-cards) title. Enable or disable **Uppercase headings** if necessary.&#x20;

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2Fi54i90t0L7WSDwHiagd6%2Ftypo-pcard.png?alt=media&#x26;token=04484c7b-51cd-43ed-a31e-8d9aa3b1483a" alt=""><figcaption></figcaption></figure>

## Navigation

Choose the font for your navigation as **Body font**/**Headings font, Font weight** options and enable/disable **Uppercase navigation**.

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FGrs2oSPH02BrHvrkzRUi%2Ftypo-navigation.png?alt=media&#x26;token=41674aaa-7e87-4dd5-8146-0417c845f74e" alt=""><figcaption></figcaption></figure>

## Buttons

Choose the font for your button labels as **Body font**/**Headings font** and enable/disable the **Font weight** options.

You can also adjust the **Letter spacing** and the **Text transform** as Normal, Title case, UPPER CASE, lowercase.

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FgXfCtPMNyGon4Ugz0C8f%2Ftypo-button.png?alt=media&#x26;token=6c527e59-a0f7-4213-bfa3-58ecdd35146a" alt=""><figcaption></figcaption></figure>


---

# 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://docs.foxecom.com/sleek-theme/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.