Typography
The fonts, sizes and spacing of text across the store. The heading and body fonts set the overall look. Separate groups fine-tune subheadings and labels, product card titles, buttons, menus and the announcement bar, and each has its own phone and desktop size.
Where to find it: In the theme editor, click the gear icon (Theme settings) in the left sidebar, then open Typography.
Good for
- Setting your brand fonts for headings and body text
- Making menus, buttons or product titles stand out with their own font
- Tuning text sizes separately for phones and desktop
Settings
Fonts
| Body font | The typeface for paragraphs, descriptions, prices in the cart, form fields and most small text. Bold and italic versions load automatically when the font has them.
Default: assistant_n4. |
| Heading font | The typeface for headings (H1–H6), including section titles, product and page titles. The theme always shows headings at semi-bold weight, whatever style you pick.
Default: assistant_n7. |
Headings
| Text transform | Uppercase puts every heading in capitals; Capitalize capitalizes the first letter of each word. Default keeps the capitals you typed.
Choose Default (default), Uppercase or Capitalize. |
H 1–6
Each of the 6 heading levels has the same settings, set separately for each one.
| Mobile size | The heading's size on phones, below 750px wide. H1 is usually the page or banner title; H6 is the smallest heading level.
Adjustable for each level: H1 16px to 96px (default 32px); H2 14px to 80px (default 26px); H3 12px to 64px (default 22px); H4 12px to 48px (default 18px); H5 12px to 36px (default 16px); H6 10px to 28px (default 14px). |
| Desktop size | The heading's size on screens 750px and wider.
Adjustable for each level: H1 16px to 96px (default 48px); H2 14px to 80px (default 36px); H3 12px to 64px (default 28px); H4 12px to 48px (default 22px); H5 12px to 36px (default 18px); H6 10px to 28px (default 16px). |
| Line height | The space between lines of this heading, as a percentage of its size. Big headings usually look best between 100% and 120%.
Adjustable for each level: H1 100% to 200% (default 120%); H2 100% to 200% (default 120%); H3 100% to 200% (default 125%); H4 100% to 200% (default 130%); H5 100% to 200% (default 140%); H6 100% to 200% (default 150%). |
| Letter spacing | The space between letters. Each step adds 1/100 of the letter size, so 10 adds a tenth; negative values pull letters closer together.
Adjustable for each level: H1 -5 to 20 (default 0); H2 -5 to 20 (default 0); H3 -5 to 20 (default 0); H4 -5 to 20 (default 0); H5 -5 to 20 (default 0); H6 -5 to 20 (default 0). |
Subheadings and labels
| Font source | Which typeface small labels use: the heading font, the body font, or a Custom font you pick just for them. A custom font loads its own files, which adds a little page weight.
Choose Same as heading font, Same as body font (default) or Custom. |
| Subheading font | The font for subheadings and labels. Used when Font source is Custom.
Default: assistant_n4. Only appears when Font source is Custom. |
| Mobile size | The size on phones. Subheadings are the small lines next to section headings, plus product badges, vendor names, discount labels and similar small labels.
Adjustable from 8px to 32px (default 11px). |
| Desktop size | The size of subheadings and labels on screens 750px and wider. Product badges are drawn a little smaller on phones.
Adjustable from 8px to 32px (default 12px). |
| Line height | The space between lines of subheading text, as a percentage of its size.
Adjustable from 100% to 200% (default 150%). |
| Letter spacing | The space between letters in subheadings. Small uppercase labels are easier to read with a little extra spacing.
Adjustable from -5 to 20 (default 10). |
| Text transform | Capitalization for the subheadings in section headings, and in countdown and FAQ labels.
Choose Default, Uppercase (default) or Capitalize. |
Body
| Mobile size | The size of body text on phones, below 750px wide. Paragraphs, product descriptions and rich text all use it.
Adjustable from 12px to 24px (default 15px). |
| Desktop size | The size of body text on screens 750px and wider.
Adjustable from 12px to 24px (default 16px). |
| Line height | The space between lines of body text. Around 150–160% keeps long descriptions and blog posts easy to read.
Adjustable from 100% to 200% (default 160%). |
| Letter spacing | The space between letters in body text. Most fonts read best at 0.
Adjustable from -5 to 20 (default 0). |
Product card
| Font source | Which typeface product cards use for the product title and price: the heading font, the body font, or a Custom font.
Choose Same as heading font (default), Same as body font or Custom. |
| Product title font | The font for product titles and prices on cards. Used when Font source is Custom.
Default: assistant_n7. Only appears when Font source is Custom. |
| Mobile size | The size of product titles and prices on product cards and mini cards on phones.
Adjustable from 10px to 24px (default 14px). |
| Desktop size | The size of product titles and prices on cards on screens 750px and wider.
Adjustable from 10px to 24px (default 14px). |
| Line height | The space between lines when a long product title wraps onto two lines.
Adjustable from 100% to 200% (default 150%). |
| Letter spacing | The space between letters in product card titles and prices.
Adjustable from -5 to 20 (default 0). |
| Text transform | Capitalization for product titles on cards. Uppercase can make long titles hard to scan in a dense grid.
Choose Default (default), Uppercase or Capitalize. |
Buttons
| Font source | Which typeface button labels use: the heading font, the body font, or a Custom font.
Choose Same as heading font, Same as body font (default) or Custom. |
| Button font | The font for button labels. Used when Font source is Custom.
Default: assistant_n4. Only appears when Font source is Custom. |
| Mobile size | The size of button labels on phones. It applies to every button in the theme, including add to cart, checkout and banner buttons.
Adjustable from 10px to 24px (default 14px). |
| Desktop size | The size of button labels on screens 750px and wider.
Adjustable from 10px to 24px (default 14px). |
| Line height | The line height of button labels. It also affects how tall buttons are.
Adjustable from 100% to 200% (default 120%). |
| Letter spacing | The space between letters in button labels.
Adjustable from -5 to 20 (default 5). |
| Text transform | Capitalization for every button label in the theme.
Choose Default (default), Uppercase or Capitalize. |
Navigation
| Font source | Which typeface the menus use: the heading font, the body font, or a Custom font.
Choose Same as heading font (default), Same as body font or Custom. |
| Navigation font | The font for menu links. Used when Font source is Custom.
Default: assistant_n7. Only appears when Font source is Custom. |
| Mobile size | The size of menu links on phones, including the mobile menu drawer.
Adjustable from 10px to 24px (default 14px). |
| Desktop size | The size of header menu links, mega menus and dropdowns on screens 750px and wider.
Adjustable from 10px to 24px (default 14px). |
| Line height | The line height of menu links. Higher values space out links in the mobile menu and dropdowns.
Adjustable from 100% to 200% (default 100%). |
| Letter spacing | The space between letters in menu links.
Adjustable from -5 to 20 (default 0). |
| Text transform | Capitalization for header and mobile menu links.
Choose Default (default), Uppercase or Capitalize. |
Announcement bar
| Font source | Which typeface the announcement bar messages use: the heading font, the body font, or a Custom font.
Choose Same as heading font, Same as body font (default) or Custom. |
| Announcement font | The font for announcement bar messages. Used when Font source is Custom.
Default: assistant_n4. Only appears when Font source is Custom. |
| Mobile size | The size of announcement bar messages on phones.
Adjustable from 10px to 24px (default 13px). |
| Desktop size | The size of announcement bar messages on screens 750px and wider.
Adjustable from 10px to 24px (default 14px). |
| Line height | The line height of announcement messages. It affects how tall the bar is when a message wraps.
Adjustable from 100% to 200% (default 150%). |
| Letter spacing | The space between letters in announcement messages.
Adjustable from -5 to 20 (default 0). |
| Text transform | Capitalization for announcement bar messages.
Choose Default (default), Uppercase or Capitalize. |
Tips
- Phone and desktop sizes are separate. The mobile size applies below 750px wide and the desktop size from 750px up. If a change seems to do nothing, check that you edited the size for the screen you're looking at.
- Two fonts are usually enough. Leave most Font source options on the heading or body font. Each Custom font loads its own files, which slows the page down a little.
- Headings are always semi-bold. The theme shows H1–H6 at semi-bold weight in the family you pick, so choosing a different style in the picker won't make headings bolder or lighter.
- Space out small capitals. Small uppercase labels, like subheadings and badges, read more easily with a little letter spacing (around 5–10). Large headings often look better slightly tighter.
- Line height is a percentage of the text size. Big headings look best around 100–120%; paragraphs around 150–160%.
Troubleshooting
I changed the heading size but my banner title didn't change
Many sections let you pick which heading level (H1–H6) a title uses. Check the section's heading size setting to see which level it uses, then edit that level here.
The font I picked looks different from the preview in the font picker
Headings are always semi-bold and body text is always regular weight, so a light or black style from the picker still shows at those weights. Bold and italic text in descriptions uses the font's own bold and italic versions when it has them.
Why does the subheading text transform not change my product badges?
Badges use the subheading font and size, but Text transform only affects the small subheading lines in section headings and in countdown and FAQ labels.