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

# Typography

Set the fonts and text styling used across the theme, from headings down to product prices.

![Typography setting panel overview](/files/U8Zmv8P5yWTBgKjlaRjY)

***

## Fonts

Helix uses three font roles that each component draws from:

* **Heading** — Used for all H1–H6 titles.
* **Body** — Used for paragraphs, descriptions, and general reading text.
* **Accent** — Used for emphasis elements such as buttons, badges, and subheadings.

![Font family pickers — Heading, Body, and Accent](/files/nhzXVo57fhVR34wMPR5a)

***

## Fluid Heading Sizes

{% hint style="info" %}
**Fluid typography**

H1–H4 take both a desktop size and a mobile size. The theme interpolates between them as the screen width changes (CSS `clamp`), so a heading scales smoothly instead of snapping at a breakpoint. No extra setup needed.
{% endhint %}

***

## Paragraph

Sets the size and line height of body text.

![Body text typography settings](/files/M9nTv3wr7RZ5jtW7b53o)

***

## Headings

Styles every H1–H6 title. Each level sets its own size, line height, and text case, while letter spacing applies to all levels at once.

* **H1–H4** — Take a desktop size and a mobile size, the endpoints of the fluid scale (see [Fluid Heading Sizes](#fluid-heading-sizes)).
* **H5–H6** — Take a single fixed size.

![Heading size settings — H1 through H6 desktop and mobile values](/files/qNEkLoBn5YKd6mhUiY7W)

***

## Subheadings

Small labels shown above section titles (e.g. "FEATURED COLLECTION"). Sets their font, size, letter spacing, and text case.

![Subheading typography settings](/files/11OAeT0Nl3x9Cbvpt8l4)

***

## Buttons

Styles the text on buttons. Sets the font, size, letter spacing, and text case.

![Button typography settings](/files/mEB7rLJI4wYWSS8z5qxB)

***

## Badges

Styles badge labels such as "SALE" or "NEW". Sets the font, size, letter spacing, and text case.

![Badge typography settings](/files/FTShZ1fXGTRNLvRih3dw)

***

## Product card title

Styles the product name on cards. Sets the font, size, line height, letter spacing, and text case.

![Product card title typography](/files/PWJE3DL72OyRgMQO2zxS)

***

## Product card price

Styles the price on cards. Sets the font and size.

![Product card price typography](/files/3EDZOKkaoKDBj1AA875J)