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
| Problem |
Fix |
| 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. |
