githubEdit

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

1

Choose fonts

  • Open Theme settings > Typography.

  • Under Fonts, set Body, Heading, Subheading, and Accent.

2

Set scale

  • Under Sizes, set Base font size and Scale ratio so body and headings feel balanced.

3

Style body and buttons

  • Under Body, set Line height.

  • Under Button, set Font, Line height, Letter spacing, and Case.

4

Style headings

  • Open Heading 1 through Heading 6.

  • For each level, set Font, Line height, Letter spacing, and Case.

5

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.

Last updated

Was this helpful?