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

# 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="/files/fC8nvesdtJl8uqL0WgVP" 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="/files/eX46PFAyKlOw7Qc1doiA" 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="/files/8Ke5Qp5JFyoKbT2ISoeu" alt=""><figcaption></figcaption></figure>

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

Highlight text is used to emphasize key information.

<figure><img src="/files/b0wdPp6kzGvgkh7xP2jT" 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="/files/jHmazlOXComFZ07PkG5i" 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](/zest-theme/changelog.md)
{% endhint %}

### Subheading

Subheadings are smaller titles that support main headings.

<figure><img src="/files/dr3aSmrpZol0Z9fTehAk" 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](/zest-theme/changelog.md)
{% endhint %}

## Product cards title

Customize the font for your [Product card](/zest-theme/theme-settings/product-card.md) title.

<figure><img src="/files/oRTqcyk5ceICxtELdp40" 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="/files/SAsOxffm8mFtRdg3K1FI" 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="/files/a1MC683K7jgJpgjIBy4o" 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.