# Typography

<Hint type="success">

Steps:

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

</Hint>

Typography is considered one of the essential components that impact the website's look and feel. &#x20;

## **Body text and Headings**

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 weight**.

![image](https://docs-assets.foxecom.app/hyper-theme/image_Ssijnlbv.png)

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.

![image](https://docs-assets.foxecom.app/hyper-theme/image_d0caUgL1.png)

### Display headings

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

![image](https://docs-assets.foxecom.app/hyper-theme/image_dfHP0PBX.png)

### 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.

![image](https://docs-assets.foxecom.app/hyper-theme/image_2BhLn7Q2.png)

## Product cards title

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

![image](https://docs-assets.foxecom.app/hyper-theme/image_nZdRfVpe.png)

## Navigation

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

![image](https://docs-assets.foxecom.app/hyper-theme/image_OxnH4zKh.png)

## 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.

![image](https://docs-assets.foxecom.app/hyper-theme/image_AsEaxJz8.png)