Typography

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

Typography setting panel overview

---

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

---

Fluid Heading Sizes

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.

---

Paragraph

Sets the size and line height of body text.

Body text typography settings

---

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).

• H5–H6 — Take a single fixed size.

Heading size settings — H1 through H6 desktop and mobile values

---

Subheadings

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

Subheading typography settings

---

Buttons

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

Button typography settings

---

Badges

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

Badge typography settings

---

Product card title

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

Product card title typography

---

Product card price

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

Product card price typography

---

Need help?

Whether you have a question, run into an issue, or just need some guidance, our support team is here to help.

Chat with us Submit a ticket