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

# Typography

### Quick Adjustment

In addition to selecting fonts for **Body** and **Headings**, you can instantly increase or decrease the size of all headings and body text at once, using the **Base size** range slider. This allows you to quickly modify the overall look and feel of your store without adjusting individual text elements.

<figure><img src="/files/YXWcx91PFP6iyqVW8T5b" alt=""><figcaption></figcaption></figure>

If you need more precise control over each heading style, proceed to the next section.

***

### Granular Adjustment

For finer control, you can adjust each heading type separately. The theme allows you to set different sizes for **desktop** and **mobile** devices.

{% hint style="info" %}
The **Desktop font size scale** setting is a percentage of the **Base size**.

In the screenshot above, the Page title size is set to 150% of the Base size (40px), which equals 60px.
{% endhint %}

<figure><img src="/files/xOp47urk3c6LwxtN3hCa" alt=""><figcaption></figcaption></figure>

#### Headings

We provide detailed customization options for three types of headings:

* **Page title**
* **Section heading**
* **Secondary heading**

While the **Base size** setting affects all headings at once, you can scroll down to the individual heading settings to customize each one separately.

#### Subheading

In addition to heading settings, you can:

* Choose whether to use the **Heading** or **Body** font.
* Apply the **Make font bolder** option.

#### Caption

This is the smallest font used in the interface and captions. It should not be larger than the **Body** font size.

#### Buttons

The settings for button labels are similar to Subheading customization. You can individually adjust:

* **Main buttons** — Larger buttons used in prominent sections.
* **Secondary buttons** — Utility buttons for smaller interface elements.

{% hint style="success" icon="lightbulb" %}
In blocks or sections that include buttons, you can choose from three display styles: **Solid**, **Outlined**, **Link**.
{% endhint %}

***

### Highlighted and Secondary heading feature

#### Secondary heading

<figure><img src="/files/4OKZfsVLPgMmdVkyPpwr" alt=""><figcaption></figcaption></figure>

In the **Theme settings → Typography → Headings**, you'll find a **Secondary heading** picker. It's used in two cases:

1. If you wrap any word or phrase inside `{curly brackets}` in a section or block's Heading field, it will automatically pull the Secondary heading font.

<figure><img src="/files/c0SSEDlXosFfw5dc2ZYv" alt=""><figcaption></figcaption></figure>

2. In **Theme settings → Typography**, you can switch the toggle from **Main** to **Secondary** for a specific type of heading.

<figure><img src="/files/IiSYEwvodmdpkRzVCuOF" alt=""><figcaption></figcaption></figure>

{% hint style="warning" icon="hand-pointer" %}
For example, you can pair a bold accent font with your Main heading, or choose the same font in an Italic style for the Secondary heading to create more contrast.
{% endhint %}

#### Highlighted heading

If you wrap any word or phrase inside `[square brackets]` in a section or block's Heading field, that part will be highlighted using the **Highlighted background** color. This color is set in **Theme settings → Colors → Color scheme** applied to the specific section.

<figure><img src="/files/SvCfKOMljGWAZAdGSNFM" alt=""><figcaption></figcaption></figure>

You can also mix **Secondary heading** and **Highlighted heading** together to create unique and unexpected combinations.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://staylime.com/docs/volume-themes/theme-settings/typography.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.