# Typography

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.

## How to access Typography settings

{% hint style="success" %}
Steps:

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

## Typography settings options

You can choose between many [existing fonts](https://shopify.dev/docs/storefronts/themes/architecture/settings/fonts#available-fonts) from the library.

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

{% hint style="info" %}
To learn more about system fonts and how they work with your theme, visit [Shopify's system fonts documentation](https://shopify.dev/docs/storefronts/themes/architecture/settings/fonts#system-fonts).
{% endhint %}

### Fonts

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FWRX4FpKmpnaAS2wEFyHA%2Fimage.png?alt=media&#x26;token=f175651c-58b1-4b51-8fe1-adef9fa4b4d4" alt=""><figcaption></figcaption></figure>

* **Body**: Choose the font for body text, which will be used for the majority of content across your site. Select from the available fonts and apply them to the body of your pages.
* **Heading**: Choose the font for headings, which will be applied to titles and important sections of your site.
* **Subheading**: Choose the font for subheadings, which appear in secondary sections or as a secondary emphasis below headings.

### Text presets

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FUFLgUrJC0ovbn0UKPLRB%2Fimage.png?alt=media&#x26;token=031dff70-f0bd-4b1e-95ca-65714bab7bed" alt=""><figcaption></figcaption></figure>

Text presets automatically adjust the font sizes for various screen sizes, ensuring your typography scales well on all devices.

You can choose from different text presets in sections or blocks, allowing you to set the ideal font size for each:

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FbXzJ6zMEZPUStc3IOgle%2Fimage.png?alt=media&#x26;token=91be75e9-a3aa-49f3-b9c1-e50d173505ef" alt=""><figcaption></figcaption></figure>

Available presets:

* **Default**: Use the default font size you set in the Rich text field.

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FA9L5adMkLaXXVDRMImGC%2Fimage.png?alt=media&#x26;token=57df14d2-dce5-4125-b080-f71a14a30925" alt=""><figcaption></figcaption></figure>

* **Paragraph**: Used for standard paragraph text. You can adjust the paragraph font size [here](#paragraph).
* **Subheading**: Used for smaller, supporting titles. You can adjust the subheading font size [here](#subheading)
* **Heading 1 to Heading 6**: Choose from different heading sizes, from the largest (Heading 1) to the smallest (Heading 6).
* **Custom**: Allows you to set a custom font size based on your design needs.

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FbdN5Agn9AbFH5dstzk5h%2Fimage.png?alt=media&#x26;token=cac22364-bcfe-4f73-a0a6-d57037746ae7" alt=""><figcaption></figcaption></figure>

### Paragraph

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FfwBe2hFZ8Wqv9NeHOeI2%2Fimage.png?alt=media&#x26;token=5b394419-fa79-4be3-975f-dcb105015535" alt=""><figcaption></figcaption></figure>

* **Size**: Set the font size for paragraph text (10 - 18px). The size is adjustable in pixels (px).&#x20;
  * For example, 15px is typically used for body text.

### Subheading

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FSqkNEqJSeKyNBtW61dID%2Fimage.png?alt=media&#x26;token=61c3b36d-bab0-40c6-af6a-399e673ea047" alt=""><figcaption></figcaption></figure>

* **Size**: Adjust the size of subheadings. You can use percentage values to scale the font size (70 - 150%).
* **Letter spacing**: Adjust the spacing between letters in subheadings (-10 - 10%). This helps control the look of the text.
* **Text transform**: Choose from options like Normal, Title Case, UPPER CASE, or lower case to customize the appearance of the subheading text.