Skip to content
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
Choose fonts
- Open Theme settings > Typography.
- Under Fonts, set Body, Heading, Subheading, and Accent.
Set scale
- Under Sizes, set Base font size and Scale ratio so body and headings feel balanced.
Style body and buttons
- Under Body, set Line height.
- Under Button, set Font, Line height, Letter spacing, and Case.
Style headings
- Open Heading 1 through Heading 6.
- For each level, set Font, Line height, Letter spacing, and Case.
Set icon and separator style
- Under Styles, choose Icon style and Text separator.
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. |