Typography

Where to find it

Usage notes

In any rich heading, select text and apply Bold or Italic to highlight it. The controls below define that highlight globally; sections can optionally override only its color.

Sizes automatically scale for all screen sizes

Editor controls

Conditional controls appear after choosing the relevant source, style or option. Saved values may differ from new defaults.

Body

Choose an available Shopify font.

Subheading

Choose an available Shopify font.

Heading

Choose an available Shopify font.

Accent

Choose an available Shopify font.

Accent color source

Choose the presentation or source that fits this component.Options: Brand color · Solid · Gradient

Accent colorConditional

Choose a local color when the relevant custom source is enabled.

Gradient startConditional

Choose a local color when the relevant custom source is enabled.

Gradient endConditional

Choose a local color when the relevant custom source is enabled.

Accent font

Choose the presentation or source that fits this component.Options: Accent · Heading · Body

Accent weight

Choose the presentation or source that fits this component.Options: Light · Regular · Medium · Bold · Black

Italic accent

Enable or disable this option and preview the result.

Uppercase accent

Enable or disable this option and preview the result.

Accent size ratio

Adjust within the range offered by the theme editor.

Accent effect

Choose the presentation or source that fits this component.Options: Highlight · None · Soft shadow · Underline · Pill highlight

Size

Choose the presentation or source that fits this component.Options: 10px · 12px · 14px · 16px · 18px

Line height

Choose the presentation or source that fits this component.Options: Tight · Normal · Loose

H1 font

Choose the presentation or source that fits this component.Options: Heading · Accent · Body

Size

Choose the presentation or source that fits this component.Options: 10px · 12px · 14px · 16px · 18px · 20px · 24px · 32px · 40px · 48px · 56px · 72px · 88px · 120px · 152px · 184px

Line height

Choose the presentation or source that fits this component.Options: Tight · Normal · Loose

Letter spacing

Choose the presentation or source that fits this component.Options: Tight · Normal · Loose

Case

Choose the presentation or source that fits this component.Options: Default · Uppercase

H2 font

Choose the presentation or source that fits this component.Options: Heading · Accent · Body

SizeConditional

Choose the presentation or source that fits this component.Options: 10px · 12px · 14px · 16px · 18px · 20px · 24px · 32px · 40px · 48px · 56px · 72px · 88px · 120px · 152px · 184px

Line heightConditional

Choose the presentation or source that fits this component.Options: Tight · Normal · Loose

Letter spacingConditional

Choose the presentation or source that fits this component.Options: Tight · Normal · Loose

CaseConditional

Choose the presentation or source that fits this component.Options: Default · Uppercase

H3 font

Choose the presentation or source that fits this component.Options: Heading · Accent · Subheading · Body

SizeConditional

Choose the presentation or source that fits this component.Options: 10px · 12px · 14px · 16px · 18px · 20px · 24px · 32px · 40px · 48px · 56px · 72px · 88px · 120px · 152px · 184px

Line heightConditional

Choose the presentation or source that fits this component.Options: Tight · Normal · Loose

Letter spacingConditional

Choose the presentation or source that fits this component.Options: Tight · Normal · Loose

CaseConditional

Choose the presentation or source that fits this component.Options: Default · Uppercase

H4 font

Choose the presentation or source that fits this component.Options: Heading · Accent · Subheading · Body

SizeConditional

Choose the presentation or source that fits this component.Options: 10px · 12px · 14px · 16px · 18px · 20px · 24px · 32px · 40px · 48px · 56px · 72px · 88px · 120px · 152px · 184px

Line heightConditional

Choose the presentation or source that fits this component.Options: Tight · Normal · Loose

Letter spacingConditional

Choose the presentation or source that fits this component.Options: Tight · Normal · Loose

CaseConditional

Choose the presentation or source that fits this component.Options: Default · Uppercase

H5 font

Choose the presentation or source that fits this component.Options: Heading · Accent · Subheading · Body

SizeConditional

Choose the presentation or source that fits this component.Options: 10px · 12px · 14px · 16px · 18px · 20px · 24px · 32px · 40px · 48px · 56px · 72px · 88px · 120px · 152px · 184px

Line heightConditional

Choose the presentation or source that fits this component.Options: Tight · Normal · Loose

Letter spacingConditional

Choose the presentation or source that fits this component.Options: Tight · Normal · Loose

CaseConditional

Choose the presentation or source that fits this component.Options: Default · Uppercase

H6 font

Choose the presentation or source that fits this component.Options: Heading · Accent · Subheading · Body

SizeConditional

Choose the presentation or source that fits this component.Options: 10px · 12px · 14px · 16px · 18px · 20px · 24px · 32px · 40px · 48px · 56px · 72px · 88px · 120px · 152px · 184px

Line heightConditional

Choose the presentation or source that fits this component.Options: Tight · Normal · Loose

Letter spacingConditional

Choose the presentation or source that fits this component.Options: Tight · Normal · Loose

CaseConditional

Choose the presentation or source that fits this component.Options: Default · Uppercase

Advanced H2–H6 sizing and spacing

Show existing font, size, spacing and case controls for each heading level.