# Typography Steps 1. In the theme editor (**Customize**), click **Theme settings.** 2. Locate **Typography.** 3. Make necessary changes. 4. **Save.** 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. ![image](https://docs-assets.foxecom.app/zest-theme/image_fC8nvesd.png) * **Font family:** Choose a font for the body text. Example: "Inter". 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) * **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. ![image](https://docs-assets.foxecom.app/zest-theme/image_eX46PFAy.png) * **Font family:** Choose a font for headings. Example: "Fahkwang". 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) * **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 ![image](https://docs-assets.foxecom.app/zest-theme/image_8Ke5Qp5J.png) The settings for Highlight text are available on ✨ **Zest version 9.0.0 onwards**. See our [Changelog](/zest-theme/changelog) Highlight text is used to emphasize key information. ![image](https://docs-assets.foxecom.app/zest-theme/image_b0wdPp6k.png) * **Font family:** Select whether to match the **Headings font** or **Use custom font**. * **Custom font:** If enabled, choose a unique font (e.g., "Assistant"). 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) ### Mega title Mega titles are extra-large headings, typically used for hero sections or banners. ![image](https://docs-assets.foxecom.app/zest-theme/image_jHmazlOX.png) * **Font family:** Select whether to match the **Headings font** or **Use custom font**. * **Custom font:** If enabled, choose a unique font (e.g., "Assistant"). 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) * **Font size scale:** Adjust the size of the mega title (400 - 800%). * **Uppercase mega title:** Enable to display mega titles in all capital letters. The settings for Mega title are available on ✨ **Zest version 7.0.0 onwards**. See our [Changelog](/zest-theme/changelog) ### Subheading Subheadings are smaller titles that support main headings. ![image](https://docs-assets.foxecom.app/zest-theme/image_dr3aSmrp.png) * **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. The settings for Subheading are available on ✨ **Zest version 9.0.0 onwards**. See our [Changelog](/zest-theme/changelog) ## Product cards title Customize the font for your [Product card](https://docs.foxecom.com/zest-theme/theme-settings/product-card) title. ![image](https://docs-assets.foxecom.app/zest-theme/image_oRTqcyk5.png) * **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. ![image](https://docs-assets.foxecom.app/zest-theme/image_SAsOxffm.png) * **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. ![image](https://docs-assets.foxecom.app/zest-theme/image_a1MC683K.png) * **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.