# Typography

Typography settings in **Theme settings > Typography** let merchants choose font families, set readable type scale, and standardize body, button, heading, icon, and separator styles across the storefront.

## How to change theme typography

{% stepper %}
{% step %}

#### Choose fonts

* Open **Theme settings > Typography**.
* Under **Fonts**, set **Body**, **Heading**, **Subheading**, and **Accent**.
  {% endstep %}

{% step %}

#### Set scale

* Under **Sizes**, set **Base font size** and **Scale ratio** so body and headings feel balanced.
  {% endstep %}

{% step %}

#### Style body and buttons

* Under **Body**, set **Line height**.
* Under **Button**, set **Font**, **Line height**, **Letter spacing**, and **Case**.
  {% endstep %}

{% step %}

#### Style headings

* Open **Heading 1** through **Heading 6**.
* For each level, set **Font**, **Line height**, **Letter spacing**, and **Case**.
  {% endstep %}

{% step %}

#### Set icon and separator style

* Under **Styles**, choose **Icon style** and **Text separator**.
  {% endstep %}
  {% endstepper %}

### Notes on typography

* **Base font size** scales type-driven spacing across the theme—preview several templates after changes.
* **Scale ratio** controls how much each heading step grows (100–135%).
* **Letter spacing** options are labeled **Tight**, **Normal**, and **Loose** in the editor.
* **Text separator** appears between text segments in supported buttons (dot vs line).

## Typography settings

### Fonts

| Setting    | What it controls                       |
| ---------- | -------------------------------------- |
| Body       | Default paragraph and supporting text. |
| Heading    | Default heading font family.           |
| Subheading | Subheading font family.                |
| Accent     | Accent typography where applied.       |

### Sizes

| Setting        | What it controls                                                |
| -------------- | --------------------------------------------------------------- |
| Base font size | Root size for scaling type (9–20 px, default 14 px).            |
| Scale ratio    | Step between type levels as a percent (100–135%, default 110%). |

### Body

| Setting     | What it controls                                                                          |
| ----------- | ----------------------------------------------------------------------------------------- |
| Line height | **None** (1), **Tight** (1.25), **Normal** (1.625), or **Loose** (2). Default **Normal**. |

### Button

| Setting        | What it controls                                                        |
| -------------- | ----------------------------------------------------------------------- |
| Font           | **Body**, **Heading**, **Subheading**, or **Accent**. Default **Body**. |
| Line height    | **None**, **Tight**, **Normal**, or **Loose**. Default **Normal**.      |
| Letter spacing | **Tight**, **Normal**, or **Loose**. Default **Normal**.                |
| Case           | **Default**, **Uppercase**, or **Lowercase**. Default **Default**.      |

### Heading 1 through Heading 6

Each heading level uses the same four settings (defaults below apply to every level).

| Setting        | What it controls                                                        |
| -------------- | ----------------------------------------------------------------------- |
| Font           | **Body**, **Heading**, **Subheading**, or **Accent**. Default **Body**. |
| Line height    | **None**, **Tight**, **Normal**, or **Loose**. Default **Normal**.      |
| Letter spacing | **Tight**, **Normal**, or **Loose**. Default **Normal**.                |
| Case           | **Default**, **Uppercase**, or **Lowercase**. Default **Default**.      |

### Styles

| Setting        | What it controls                                                                                            |
| -------------- | ----------------------------------------------------------------------------------------------------------- |
| Icon style     | **Classic regular**, **Classic solid**, **Sharp regular**, or **Sharp solid**. Default **Classic regular**. |
| Text separator | **Dot** or **Line** between text in supported buttons. Default **Dot**.                                     |