# 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. Selecting a different font can affect the speed of your store.

* System fonts: fonts that are already installed on most computers.
* Other fonts: fonts that may need downloading before being displayed

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

### Body

The **Body** text settings control the main content text, such as paragraphs, product descriptions, and general site information.

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FNhn8E3AKg37ws6rXJlDS%2Fimage.png?alt=media&#x26;token=a95299fd-302f-4aa9-9c20-ba40a5a58e19" alt=""><figcaption></figcaption></figure>

* **Font family:** Choose a font for the body text. Example: "Inter".

{% hint style="info" %}
Selecting a different font can affect the performance of your store. [Learn more about system fonts.](https://help.shopify.com/en/manual/online-store/os/store-speed/improving-speed#fonts)
{% endhint %}

* **Bolder font weight:** Set how bold certain text elements should appear.
  * Medium
  * Semi bold
  * Bold
  * Extra bold
  * Black
* **Font size scale:** Adjust the size of the body text relative to the default size (90 - 150%).

### Headings

**Headings** help structure the content and improve readability. These settings apply to titles and section headings throughout the store.

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2F5Xv07wOeJR3dyn24jv8k%2Fimage.png?alt=media&#x26;token=a98661e7-1950-4da8-a3c3-5297551c01ce" alt=""><figcaption></figcaption></figure>

* **Font family:** Choose a font for headings. Example: "Fahkwang".

{% hint style="info" %}
Selecting a different font can affect the performance of your store. [Learn more about system fonts.](https://help.shopify.com/en/manual/online-store/os/store-speed/improving-speed#fonts)
{% endhint %}

* **Font size scale:** Adjust the heading size percentage (90 - 150%).
* **Mobile font size scale:** Set a different heading size for mobile devices to optimize responsiveness (70 - 120%).
* **Letter spacing:** Modify spacing between letters to create a unique style (-5 - 10px).
* **Uppercase headings:** Enable this option to display all headings in uppercase letters.

### Highlight text

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2F3zARCM7Hebq7TbRH83Hc%2Fimage.png?alt=media&#x26;token=3db49f25-4922-4bbd-9f6d-89a3b05c0733" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
The settings for Highlight text are available on ✨ **Zest version 9.0.0 onwards**. See our [changelog](https://docs.foxecom.com/zest-theme/changelog "mention")
{% endhint %}

Highlight text is used to emphasize key information.

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FaU0WgpcCtp6DXzxgcGVy%2Fimage.png?alt=media&#x26;token=14750713-b3ae-461a-ae59-d00f438a65cb" alt=""><figcaption></figcaption></figure>

* **Font family:** Select whether to match the **Headings font** or **Use custom font**.
* **Custom font:** If enabled, choose a unique font (e.g., "Assistant").

{% hint style="info" %}
Selecting a different font can affect the performance of your store. [Learn more about system fonts.](https://help.shopify.com/en/manual/online-store/os/store-speed/improving-speed#fonts)
{% endhint %}

### Mega title

Mega titles are extra-large headings, typically used for hero sections or banners.

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FAQ0qYK4CYAqSfSZyJ9kO%2Fimage.png?alt=media&#x26;token=b196170a-0ce3-4268-9725-3b6d019c02d1" alt=""><figcaption></figcaption></figure>

* **Font family:** Select whether to match the **Headings font** or **Use custom font**.
* **Custom font:** If enabled, choose a unique font (e.g., "Assistant").

{% hint style="info" %}
Selecting a different font can affect the performance of your store. [Learn more about system fonts.](https://help.shopify.com/en/manual/online-store/os/store-speed/improving-speed#fonts)
{% endhint %}

* **Font size scale:** Adjust the size of the mega title (400 - 800%).
* **Uppercase mega title:** Enable to display mega titles in all capital letters.

{% hint style="info" %}
The settings for Mega title are available on ✨ **Zest version 7.0.0 onwards**. See our [changelog](https://docs.foxecom.com/zest-theme/changelog "mention")
{% endhint %}

### Subheading

Subheadings are smaller titles that support main headings.

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FOnPfQR79ZYgB8ocJgbZc%2Fimage.png?alt=media&#x26;token=555ea47a-1496-429c-a3d8-b9f2097b42c6" alt=""><figcaption></figcaption></figure>

* **Font size scale:** Adjust the subheading size (70 - 150%).
* **Font family:** Select whether to match the **Headings font** or **Body font**.
* **Font weight:** Choose how bold subheadings appear.
  * Light
  * Regular
  * Medium
  * Semi bold
  * Bold
  * Extra bold
  * Black
* **Letter spacing:** Adjust the spacing between characters (-5 - 10px).
* **Text transform:** Set whether the text should remain Normal, UPPERCASE, lowercase, or Title Case.

{% hint style="info" %}
The settings for Subheading are available on ✨ **Zest version 9.0.0 onwards**. See our [changelog](https://docs.foxecom.com/zest-theme/changelog "mention")
{% endhint %}

## Product cards title

Customize the font for your [Product card](https://docs.foxecom.com/zest-theme/theme-settings/product-card) title.

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2Fns2wuT4z8LP9eAg4nCUY%2Fimage.png?alt=media&#x26;token=bbc723f8-7791-4361-ba6f-822080eaace0" alt=""><figcaption></figcaption></figure>

* **Font size scale:** Adjust the size of product titles (80 - 150%).
* **Font family:** Select whether to match the **Headings font** or **Body font**.
* **Font weight:** Choose how bold product cards title appear.
  * Light
  * Regular
  * Medium
  * Semi bold
  * Bold
  * Extra bold
  * Black
* **Uppercase product title:** Toggle uppercase formatting for product names.

## Navigation

Navigation typography settings affect menu items in the store header.

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2Fitd3DmpJTuG21PevGvBb%2Fimage.png?alt=media&#x26;token=8cc73b97-a3ba-4048-9f93-314b31fb9598" alt=""><figcaption></figcaption></figure>

* **Font family:** Select whether to match the **Headings font** or **Body font**.
* **Font weight:** Choose how bold navigation items appear.
  * Light
  * Regular
  * Medium
  * Semi bold
  * Bold
  * Extra bold
  * Black
* **Uppercase navigation:** Enable to display all menu items in uppercase.

## Buttons

The typography settings for buttons help define their visibility and style.

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FrUm3OHB6jqFdaiPHGU9J%2Fimage.png?alt=media&#x26;token=b3daa183-3b64-4a4c-bee6-c797c9d1c835" alt=""><figcaption></figcaption></figure>

* **Font family:** Select whether to match the **Headings font** or **Body font**.
* **Font weight:** Choose how bold button text appears.
  * Light
  * Regular
  * Medium
  * Semi bold
  * Bold
  * Extra bold
  * Black
* **Height:** Modify the button height (24 - 80px).
* **Corner radius:** Adjust the button's rounded corners (0 - 50px).
* **Uppercase label:** Enable to make button text uppercase.