Typography
Fonts, weights and every text size in the theme. With Customize text styles on, each kind of text gets its own controls.
Online Store › Themes › Customize › Theme settings › Typography
Heading font
Headings and product names. Only the family is used: the weights below set how bold text is. The same font as Body is recommended.
Body font
Only the family is used. The weights below set how bold each kind of text is.
Use a separate italic font
Italic words in descriptions, articles and rich text.
Italic font
Uses the family's italic at the weight picked here, or its upright style if it has none.
Weights
Body
Most text: rows, buttons, labels and prices, and headings unless Customize text styles sets them. Uses the closest weight the font has.
Reading
Descriptions, articles and longer text. Uses the closest weight the font has.
Emphasis
Bold words in text, chosen options, statuses and totals. Uses the closest weight the font has.
Sizes
Font scale
Scales every size below and the icons beside words. Buttons and controls keep their size.
Sizes in pixels. Phone sizes apply up to 390px wide and desktop sizes from 1440px; in between, text grows evenly from one to the other.
Headings
Display on phones
Hero and campaign headings, home page section headings and dialog headings.
Display on desktop
Large heading on phones
Page and section headings, main menu links and the product title.
Large heading on desktop
Heading on phones
Names inside sections: column headings, journal and article titles, collection names, rows in product lists.
Heading on desktop
Text
Body on phones
Interface text: buttons, rows, options and prices in product lists.
Body on desktop
Secondary menus on phones
The secondary menus: the header's buttons, Search and Account in the navigation drawer, the collection bar's links and the footer's menus.
Secondary menus on desktop
Reading on phones
Descriptions, articles, pages, rich text, the price on the product page, and every name under a picture in a grid (product cards, collection tiles, journal cards).
Reading on desktop
Product information on phones
Body text in the product page's information column (options, rows, details), in place of Body. The buy bar keeps Body.
Product information on desktop
Buttons on phones
The words on every button, the buy bar's and the quick-payment button's included. With Buttons and corners › Show text in capitals on, they are set at Typography › Capitals size.
Buttons on desktop
Label on phones
Row and field labels (Color, Size, Quantity, Country/region) and the links beside them (Size guide, Read more, View all).
Label on desktop
Small on phones
Fine print: counts, notes, table headers, status labels and eyebrows.
Small on desktop
Capitals size
Capitals look larger than lower case at the same size, so text in capitals at Body size or above (the collection toolbar, the help bar, headings in capitals, the product title when set in capitals) draws at this share of its size. Small capitals keep their size.
Wordmark
The shop's name when no logo image is set, and the loading mark.
Text styles
Customize text styles
Weight, line height and letter spacing for each kind of text. Each extra weight in use is one more font file for visitors to download. Off, the designed styles apply and your choices are kept for when you turn it back on.
Display
Weight
Hero and campaign headings and the largest section headings. A weight the font doesn't have uses the closest one it has.
Line height
Added to the designed spacing between lines. 0% is as designed.
Letter spacing
Added to the designed spacing between letters, as a share of the text size. 0% is as designed.
Large headings
Weight
Page and section headings, and the main menu. A weight the font doesn't have uses the closest one it has.
Line height
Added to the designed spacing between lines. 0% is as designed.
Letter spacing
Added to the designed spacing between letters, as a share of the text size. 0% is as designed.
Headings
Weight
Headings inside sections and articles, and product names in lists. A weight the font doesn't have uses the closest one it has.
Line height
Added to the designed spacing between lines. 0% is as designed.
Letter spacing
Added to the designed spacing between letters, as a share of the text size. 0% is as designed.
Product names
Product page title weight
The product's name on its own page. A weight the font doesn't have uses the closest one it has.
Names under images
Product and collection names on cards and tiles, and items in the bag. A weight the font doesn't have uses the closest one it has.
Body
Line height
Most text: rows, options, notes. Added to the designed spacing between lines; 0% is as designed.
Letter spacing
Most text. Added to the spacing between letters, as a share of the text size. 0% is as designed.
Reading
Line height
Descriptions, articles and pages. 0% keeps the spacing of the text around it.
Navigation
Font
Header buttons, Search and Account, the collection bar and footer menus.
Weight
Header buttons, Search and Account, the collection bar and footer menus. A weight the font doesn't have uses the closest one it has.
Letter spacing
Added to the spacing between letters, as a share of the text size. 0% is as designed.
Buttons
Font
Every button, the buy bar's included.
Weight
Every button, the buy bar's included. A weight the font doesn't have uses the closest one it has.
Letter spacing
Added to the spacing between letters, or to the capitals spacing when Buttons and corners › Show text in capitals is on. 0% is as designed.
Labels
Font
Field and row labels, product labels, and labels in capitals such as section eyebrows. Eyebrows set in the Heading font keep it.
Weight
Field and row labels, product labels, and labels in capitals. A weight the font doesn't have uses the closest one it has.
Letter spacing
Labels in capitals. Added to the designed spacing between letters, as a share of the text size. 0% is as designed.
Prices
Font
Prices on cards, rows and the product page.
Weight
Prices on cards, rows and the product page. Totals keep the Emphasis weight. A weight the font doesn't have uses the closest one it has.
Letter spacing
Added to the designed spacing between figures, as a share of the text size. 0% is as designed.
Wordmark
Letter spacing
The shop name shown when there is no logo, and the loading mark. Added to the designed spacing, as a share of the text size.