Typography
Theme settings: Typography.
Typography
At a glance
Set fonts and text sizes for body copy, subheadings, and headings (H1–H6) across mobile, tablet, and desktop.
Where to find it
- Theme editor path: Online Store → Customize → Theme settings → Typography
Screenshot needed
Typography in the theme editor
Screenshot of Theme settings → Typography. Show the settings panel and the live preview so merchants can match labels to what they see.
Settings
Fonts
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Body | Controls “Body” on the storefront. Open the theme editor to preview live. | inter_n4 | Always |
| Subheading | Controls “Subheading” on the storefront. Open the theme editor to preview live. | inter_n4 | Always |
| Heading | Controls “Heading” on the storefront. Open the theme editor to preview live. | inter_n6 | Always |
| Accent | Controls “Accent” on the storefront. Open the theme editor to preview live. | inter_n4 | Always |
Body
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Size - Mobile | Controls “Size - Mobile” on the storefront. Open the theme editor to preview live. | 13 | Always |
| Size - Tablet | Controls “Size - Tablet” on the storefront. Open the theme editor to preview live. | 13 | Always |
| Size - Desktop | Controls “Size - Desktop” on the storefront. Open the theme editor to preview live. | 14 | Always |
| Line height | Controls “Line height” on the storefront. Open the theme editor to preview live. | normal | Always |
| Font weight | Sets how bold font weight text appears. | 400 | Always |
Subheading
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Font | Controls “Font” on the storefront. Open the theme editor to preview live. | heading | Always |
| Size - Mobile | Controls “Size - Mobile” on the storefront. Open the theme editor to preview live. | 24 | Always |
| Size - Tablet | Controls “Size - Tablet” on the storefront. Open the theme editor to preview live. | 32 | Always |
| Size - Desktop | Controls “Size - Desktop” on the storefront. Open the theme editor to preview live. | 40 | Always |
| Line height | Controls “Line height” on the storefront. Open the theme editor to preview live. | normal | Always |
| Letter spacing | Controls “Letter spacing” on the storefront. Open the theme editor to preview live. | normal | Always |
| Text case | Controls “Text case” on the storefront. Open the theme editor to preview live. | default | Always |
| Font weight | Sets how bold font weight text appears. | 400 | Always |
Overline
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Font | Controls “Font” on the storefront. Open the theme editor to preview live. | body | Always |
| Size - Mobile | Controls “Size - Mobile” on the storefront. Open the theme editor to preview live. | 12 | Always |
| Size - Tablet | Controls “Size - Tablet” on the storefront. Open the theme editor to preview live. | 13 | Always |
| Size - Desktop | Controls “Size - Desktop” on the storefront. Open the theme editor to preview live. | 14 | Always |
| Line height | Controls “Line height” on the storefront. Open the theme editor to preview live. | normal | Always |
| Letter spacing | Controls “Letter spacing” on the storefront. Open the theme editor to preview live. | wide | Always |
| Text case | Controls “Text case” on the storefront. Open the theme editor to preview live. | uppercase | Always |
| Font weight | Sets how bold font weight text appears. | 500 | Always |
Heading 1
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Font | Controls “Font” on the storefront. Open the theme editor to preview live. | heading | Always |
| Size - Mobile | Controls “Size - Mobile” on the storefront. Open the theme editor to preview live. | 32 | Always |
| Size - Tablet | Controls “Size - Tablet” on the storefront. Open the theme editor to preview live. | 44 | Always |
| Size - Desktop | Controls “Size - Desktop” on the storefront. Open the theme editor to preview live. | 56 | Always |
| Line height | Controls “Line height” on the storefront. Open the theme editor to preview live. | tight | Always |
| Letter spacing | Controls “Letter spacing” on the storefront. Open the theme editor to preview live. | normal | Always |
| Text case | Controls “Text case” on the storefront. Open the theme editor to preview live. | default | Always |
| Font weight | Sets how bold font weight text appears. | 600 | Always |
Heading 2
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Font | Controls “Font” on the storefront. Open the theme editor to preview live. | heading | Always |
| Size - Mobile | Controls “Size - Mobile” on the storefront. Open the theme editor to preview live. | 24 | Always |
| Size - Tablet | Controls “Size - Tablet” on the storefront. Open the theme editor to preview live. | 32 | Always |
| Size - Desktop | Controls “Size - Desktop” on the storefront. Open the theme editor to preview live. | 40 | Always |
| Line height | Controls “Line height” on the storefront. Open the theme editor to preview live. | normal | Always |
| Letter spacing | Controls “Letter spacing” on the storefront. Open the theme editor to preview live. | normal | Always |
| Text case | Controls “Text case” on the storefront. Open the theme editor to preview live. | default | Always |
| Font weight | Sets how bold font weight text appears. | 600 | Always |
Heading 3
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Font | Controls “Font” on the storefront. Open the theme editor to preview live. | heading | Always |
| Size - Mobile | Controls “Size - Mobile” on the storefront. Open the theme editor to preview live. | 20 | Always |
| Size - Tablet | Controls “Size - Tablet” on the storefront. Open the theme editor to preview live. | 28 | Always |
| Size - Desktop | Controls “Size - Desktop” on the storefront. Open the theme editor to preview live. | 32 | Always |
| Line height | Controls “Line height” on the storefront. Open the theme editor to preview live. | normal | Always |
| Letter spacing | Controls “Letter spacing” on the storefront. Open the theme editor to preview live. | normal | Always |
| Text case | Controls “Text case” on the storefront. Open the theme editor to preview live. | default | Always |
| Font weight | Sets how bold font weight text appears. | 600 | Always |
Heading 4
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Font | Controls “Font” on the storefront. Open the theme editor to preview live. | heading | Always |
| Size - Mobile | Controls “Size - Mobile” on the storefront. Open the theme editor to preview live. | 18 | Always |
| Size - Tablet | Controls “Size - Tablet” on the storefront. Open the theme editor to preview live. | 22 | Always |
| Size - Desktop | Controls “Size - Desktop” on the storefront. Open the theme editor to preview live. | 24 | Always |
| Line height | Controls “Line height” on the storefront. Open the theme editor to preview live. | normal | Always |
| Letter spacing | Controls “Letter spacing” on the storefront. Open the theme editor to preview live. | normal | Always |
| Text case | Controls “Text case” on the storefront. Open the theme editor to preview live. | default | Always |
| Font weight | Sets how bold font weight text appears. | 600 | Always |
Heading 5
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Font | Controls “Font” on the storefront. Open the theme editor to preview live. | heading | Always |
| Size - Mobile | Controls “Size - Mobile” on the storefront. Open the theme editor to preview live. | 16 | Always |
| Size - Tablet | Controls “Size - Tablet” on the storefront. Open the theme editor to preview live. | 18 | Always |
| Size - Desktop | Controls “Size - Desktop” on the storefront. Open the theme editor to preview live. | 20 | Always |
| Line height | Controls “Line height” on the storefront. Open the theme editor to preview live. | normal | Always |
| Letter spacing | Controls “Letter spacing” on the storefront. Open the theme editor to preview live. | normal | Always |
| Text case | Controls “Text case” on the storefront. Open the theme editor to preview live. | default | Always |
| Font weight | Sets how bold font weight text appears. | 600 | Always |
Heading 6
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Font | Controls “Font” on the storefront. Open the theme editor to preview live. | heading | Always |
| Size - Mobile | Controls “Size - Mobile” on the storefront. Open the theme editor to preview live. | 14 | Always |
| Size - Tablet | Controls “Size - Tablet” on the storefront. Open the theme editor to preview live. | 15 | Always |
| Size - Desktop | Controls “Size - Desktop” on the storefront. Open the theme editor to preview live. | 16 | Always |
| Line height | Controls “Line height” on the storefront. Open the theme editor to preview live. | normal | Always |
| Letter spacing | Controls “Letter spacing” on the storefront. Open the theme editor to preview live. | normal | Always |
| Text case | Controls “Text case” on the storefront. Open the theme editor to preview live. | default | Always |
| Font weight | Sets how bold font weight text appears. | 600 | Always |
Accordion trigger
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Font | Controls “Font” on the storefront. Open the theme editor to preview live. | heading | Always |
| Size - Mobile | Controls “Size - Mobile” on the storefront. Open the theme editor to preview live. | 20 | Always |
| Size - Tablet | Controls “Size - Tablet” on the storefront. Open the theme editor to preview live. | 20 | Always |
| Size - Desktop | Controls “Size - Desktop” on the storefront. Open the theme editor to preview live. | 20 | Always |
| Line height | Controls “Line height” on the storefront. Open the theme editor to preview live. | normal | Always |
| Letter spacing | Controls “Letter spacing” on the storefront. Open the theme editor to preview live. | normal | Always |
| Text case | Controls “Text case” on the storefront. Open the theme editor to preview live. | default | Always |
Accordion content
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Font | Controls “Font” on the storefront. Open the theme editor to preview live. | body | Always |
| Size - Mobile | Controls “Size - Mobile” on the storefront. Open the theme editor to preview live. | 16 | Always |
| Size - Tablet | Controls “Size - Tablet” on the storefront. Open the theme editor to preview live. | 16 | Always |
| Size - Desktop | Controls “Size - Desktop” on the storefront. Open the theme editor to preview live. | 16 | Always |
| Line height | Controls “Line height” on the storefront. Open the theme editor to preview live. | normal | Always |
Accordion appearance
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Border width | Controls “Border width” on the storefront. Open the theme editor to preview live. | 1 | Always |
| Border radius | Rounds the corners. Higher values look more pill-shaped. | 8 | Always |
| Gap between items | Controls “Gap between items” on the storefront. Open the theme editor to preview live. | 12 | Always |
Policy heading
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Font | Controls “Font” on the storefront. Open the theme editor to preview live. | heading | Always |
| Size - Mobile | Controls “Size - Mobile” on the storefront. Open the theme editor to preview live. | 28 | Always |
| Size - Tablet | Controls “Size - Tablet” on the storefront. Open the theme editor to preview live. | 34 | Always |
| Size - Desktop | Controls “Size - Desktop” on the storefront. Open the theme editor to preview live. | 40 | Always |
| Line height | Controls “Line height” on the storefront. Open the theme editor to preview live. | tight | Always |
| Letter spacing | Controls “Letter spacing” on the storefront. Open the theme editor to preview live. | normal | Always |
| Text case | Controls “Text case” on the storefront. Open the theme editor to preview live. | default | Always |
Policy body
| Setting | What it does | Default | Shows when |
|---|---|---|---|
| Font | Controls “Font” on the storefront. Open the theme editor to preview live. | body | Always |
| Size - Mobile | Controls “Size - Mobile” on the storefront. Open the theme editor to preview live. | 16 | Always |
| Size - Tablet | Controls “Size - Tablet” on the storefront. Open the theme editor to preview live. | 17 | Always |
| Size - Desktop | Controls “Size - Desktop” on the storefront. Open the theme editor to preview live. | 18 | Always |
| Line height | Controls “Line height” on the storefront. Open the theme editor to preview live. | normal | Always |
Setting details
Each control from the tables above, explained simply:
Body
Controls “Body” on the storefront. Open the theme editor to preview live. Default: inter_n4.
Subheading
Controls “Subheading” on the storefront. Open the theme editor to preview live. Default: inter_n4.
Heading
Controls “Heading” on the storefront. Open the theme editor to preview live. Default: inter_n6.
Accent
Controls “Accent” on the storefront. Open the theme editor to preview live. Default: inter_n4.
Size - Mobile
Controls “Size - Mobile” on the storefront. Open the theme editor to preview live. Default: 13.
Size - Tablet
Controls “Size - Tablet” on the storefront. Open the theme editor to preview live. Default: 13.
Size - Desktop
Controls “Size - Desktop” on the storefront. Open the theme editor to preview live. Default: 14.
Line height
Controls “Line height” on the storefront. Open the theme editor to preview live. Default: normal.
Font weight
Sets how bold font weight text appears. Default: 400.
Font
Controls “Font” on the storefront. Open the theme editor to preview live. Default: heading.
Size - Mobile
Controls “Size - Mobile” on the storefront. Open the theme editor to preview live. Default: 24.
Size - Tablet
Controls “Size - Tablet” on the storefront. Open the theme editor to preview live. Default: 32.
Size - Desktop
Controls “Size - Desktop” on the storefront. Open the theme editor to preview live. Default: 40.
Line height
Controls “Line height” on the storefront. Open the theme editor to preview live. Default: normal.
Letter spacing
Controls “Letter spacing” on the storefront. Open the theme editor to preview live. Default: normal.
Text case
Controls “Text case” on the storefront. Open the theme editor to preview live. Default: default.
Font weight
Sets how bold font weight text appears. Default: 400.
Font
Controls “Font” on the storefront. Open the theme editor to preview live. Default: body.
Size - Mobile
Controls “Size - Mobile” on the storefront. Open the theme editor to preview live. Default: 12.
Size - Tablet
Controls “Size - Tablet” on the storefront. Open the theme editor to preview live. Default: 13.
Size - Desktop
Controls “Size - Desktop” on the storefront. Open the theme editor to preview live. Default: 14.
Line height
Controls “Line height” on the storefront. Open the theme editor to preview live. Default: normal.
Letter spacing
Controls “Letter spacing” on the storefront. Open the theme editor to preview live. Default: wide.
Text case
Controls “Text case” on the storefront. Open the theme editor to preview live. Default: uppercase.
Font weight
Sets how bold font weight text appears. Default: 500.
Font
Controls “Font” on the storefront. Open the theme editor to preview live. Default: heading.
Size - Mobile
Controls “Size - Mobile” on the storefront. Open the theme editor to preview live. Default: 32.
Size - Tablet
Controls “Size - Tablet” on the storefront. Open the theme editor to preview live. Default: 44.
Size - Desktop
Controls “Size - Desktop” on the storefront. Open the theme editor to preview live. Default: 56.
Line height
Controls “Line height” on the storefront. Open the theme editor to preview live. Default: tight.
Letter spacing
Controls “Letter spacing” on the storefront. Open the theme editor to preview live. Default: normal.
Text case
Controls “Text case” on the storefront. Open the theme editor to preview live. Default: default.
Font weight
Sets how bold font weight text appears. Default: 600.
Font
Controls “Font” on the storefront. Open the theme editor to preview live. Default: heading.
Size - Mobile
Controls “Size - Mobile” on the storefront. Open the theme editor to preview live. Default: 24.
Size - Tablet
Controls “Size - Tablet” on the storefront. Open the theme editor to preview live. Default: 32.
Size - Desktop
Controls “Size - Desktop” on the storefront. Open the theme editor to preview live. Default: 40.
Line height
Controls “Line height” on the storefront. Open the theme editor to preview live. Default: normal.
Letter spacing
Controls “Letter spacing” on the storefront. Open the theme editor to preview live. Default: normal.
Text case
Controls “Text case” on the storefront. Open the theme editor to preview live. Default: default.
Font weight
Sets how bold font weight text appears. Default: 600.
Font
Controls “Font” on the storefront. Open the theme editor to preview live. Default: heading.
Size - Mobile
Controls “Size - Mobile” on the storefront. Open the theme editor to preview live. Default: 20.
Size - Tablet
Controls “Size - Tablet” on the storefront. Open the theme editor to preview live. Default: 28.
Size - Desktop
Controls “Size - Desktop” on the storefront. Open the theme editor to preview live. Default: 32.
Line height
Controls “Line height” on the storefront. Open the theme editor to preview live. Default: normal.
Letter spacing
Controls “Letter spacing” on the storefront. Open the theme editor to preview live. Default: normal.
Text case
Controls “Text case” on the storefront. Open the theme editor to preview live. Default: default.
Font weight
Sets how bold font weight text appears. Default: 600.
Font
Controls “Font” on the storefront. Open the theme editor to preview live. Default: heading.
Size - Mobile
Controls “Size - Mobile” on the storefront. Open the theme editor to preview live. Default: 18.
Size - Tablet
Controls “Size - Tablet” on the storefront. Open the theme editor to preview live. Default: 22.
Size - Desktop
Controls “Size - Desktop” on the storefront. Open the theme editor to preview live. Default: 24.
Line height
Controls “Line height” on the storefront. Open the theme editor to preview live. Default: normal.
Letter spacing
Controls “Letter spacing” on the storefront. Open the theme editor to preview live. Default: normal.
Text case
Controls “Text case” on the storefront. Open the theme editor to preview live. Default: default.
Font weight
Sets how bold font weight text appears. Default: 600.
Font
Controls “Font” on the storefront. Open the theme editor to preview live. Default: heading.
Size - Mobile
Controls “Size - Mobile” on the storefront. Open the theme editor to preview live. Default: 16.
Size - Tablet
Controls “Size - Tablet” on the storefront. Open the theme editor to preview live. Default: 18.
Size - Desktop
Controls “Size - Desktop” on the storefront. Open the theme editor to preview live. Default: 20.
Line height
Controls “Line height” on the storefront. Open the theme editor to preview live. Default: normal.
Letter spacing
Controls “Letter spacing” on the storefront. Open the theme editor to preview live. Default: normal.
Text case
Controls “Text case” on the storefront. Open the theme editor to preview live. Default: default.
Font weight
Sets how bold font weight text appears. Default: 600.
Font
Controls “Font” on the storefront. Open the theme editor to preview live. Default: heading.
Size - Mobile
Controls “Size - Mobile” on the storefront. Open the theme editor to preview live. Default: 14.
Size - Tablet
Controls “Size - Tablet” on the storefront. Open the theme editor to preview live. Default: 15.
Size - Desktop
Controls “Size - Desktop” on the storefront. Open the theme editor to preview live. Default: 16.
Line height
Controls “Line height” on the storefront. Open the theme editor to preview live. Default: normal.
Letter spacing
Controls “Letter spacing” on the storefront. Open the theme editor to preview live. Default: normal.
Text case
Controls “Text case” on the storefront. Open the theme editor to preview live. Default: default.
Font weight
Sets how bold font weight text appears. Default: 600.
Font
Controls “Font” on the storefront. Open the theme editor to preview live. Default: heading.
Size - Mobile
Controls “Size - Mobile” on the storefront. Open the theme editor to preview live. Default: 20.
Size - Tablet
Controls “Size - Tablet” on the storefront. Open the theme editor to preview live. Default: 20.
Size - Desktop
Controls “Size - Desktop” on the storefront. Open the theme editor to preview live. Default: 20.
Line height
Controls “Line height” on the storefront. Open the theme editor to preview live. Default: normal.
Letter spacing
Controls “Letter spacing” on the storefront. Open the theme editor to preview live. Default: normal.
Text case
Controls “Text case” on the storefront. Open the theme editor to preview live. Default: default.
Font
Controls “Font” on the storefront. Open the theme editor to preview live. Default: body.
Size - Mobile
Controls “Size - Mobile” on the storefront. Open the theme editor to preview live. Default: 16.
Size - Tablet
Controls “Size - Tablet” on the storefront. Open the theme editor to preview live. Default: 16.
Size - Desktop
Controls “Size - Desktop” on the storefront. Open the theme editor to preview live. Default: 16.
Line height
Controls “Line height” on the storefront. Open the theme editor to preview live. Default: normal.
Border width
Controls “Border width” on the storefront. Open the theme editor to preview live. Default: 1.
Border radius
Rounds the corners. Higher values look more pill-shaped. Default: 8.
Gap between items
Controls “Gap between items” on the storefront. Open the theme editor to preview live. Default: 12.
Font
Controls “Font” on the storefront. Open the theme editor to preview live. Default: heading.
Size - Mobile
Controls “Size - Mobile” on the storefront. Open the theme editor to preview live. Default: 28.
Size - Tablet
Controls “Size - Tablet” on the storefront. Open the theme editor to preview live. Default: 34.
Size - Desktop
Controls “Size - Desktop” on the storefront. Open the theme editor to preview live. Default: 40.
Line height
Controls “Line height” on the storefront. Open the theme editor to preview live. Default: tight.
Letter spacing
Controls “Letter spacing” on the storefront. Open the theme editor to preview live. Default: normal.
Text case
Controls “Text case” on the storefront. Open the theme editor to preview live. Default: default.
Font
Controls “Font” on the storefront. Open the theme editor to preview live. Default: body.
Size - Mobile
Controls “Size - Mobile” on the storefront. Open the theme editor to preview live. Default: 16.
Size - Tablet
Controls “Size - Tablet” on the storefront. Open the theme editor to preview live. Default: 17.
Size - Desktop
Controls “Size - Desktop” on the storefront. Open the theme editor to preview live. Default: 18.
Line height
Controls “Line height” on the storefront. Open the theme editor to preview live. Default: normal.
Tips
- Changes apply store-wide — check home, product, and collection pages after saving.
- Pair with section-level color schemes for page-specific overrides.
- Read How theme settings work for how globals connect to sections.