Typography settings
These settings live in the theme editor under Theme settings (the gear icon at the bottom of the sidebar), then Typography. Everything in this group is global, so one change carries through every page at once. Settings that affect only one area live on that section instead. If you are still choosing a font pairing, Typography covers the thinking behind it.
Choose your three fonts
Section titled “Choose your three fonts”- Headings is the face used for headlines and titles, and it carries most of your store’s personality. Ships as Manrope.
- Body text is the face for paragraphs, product descriptions, and anything a customer reads at length. Comfort matters more than character here. Ships as Work Sans.
- Accents and labels is the face for captions, small labels, and small caps. Matching it to your body font keeps things quiet, while a monospaced font gives a technical feel. Ships as Work Sans.
Change one font at a time and preview it, so you always know which choice made the difference.
Scale your text up or down
Section titled “Scale your text up or down”- Heading scale multiplies every heading size at once, from 85% to 125%, and defaults to 100%. This is the fastest way to make a store feel bolder or quieter without touching a single individual size.
- Body scale does the same for body and small text, also 85% to 125% and defaulting to 100%. Nudge it up if your catalog copy runs long or your customers skew older.
- Heading line height controls how tightly headline lines stack, from 90% to 115%. Defaults to 102%, which keeps big headlines compact. Loosen it if your headings often run to three lines.
- Body line height does the same for paragraphs, from 140% to 175%, defaulting to 155%. Generous line height is what makes long product descriptions easy to read on a phone.
Set the size of each text style
Section titled “Set the size of each text style”- Hero heading size sets banner, slideshow, and image-with-text headlines. 40px to 140px, defaults to 72px. Check this on your homepage, at both desktop and phone width.
- Page title size sets product, collection, search, cart, and blog page titles. 30px to 100px, defaults to 48px.
- Section heading size sets the headings that introduce sections, plus the featured product title. 18px to 72px, defaults to 28px.
- Body text size sets your base reading size, and smaller text such as captions scales from it. 13px to 26px, defaults to 17px.
- Price size sets the product page price and the cart total. 14px to 44px, defaults to 24px. Prices inside product cards keep their own compact size, so raising this will not disturb your collection grid.
Tune letter spacing and case
Section titled “Tune letter spacing and case”- Heading letter spacing runs from -5% to 2% and defaults to -3%, drawing headline letters slightly together for a tighter, more designed look. Ease it back toward 0% if your heading font already sets tightly.
- Caption and label letter spacing runs from 0% to 35% and defaults to 16%. Wide spacing is what makes small uppercase labels read as deliberate rather than cramped.
- Numeral letter spacing runs from 0% to 8% and defaults to 2%. Look at a product page price to judge it.
- Caption and label case offers Normal or Uppercase, and defaults to Uppercase.
- Heading case offers the same two options and defaults to Normal. Uppercase headings suit short, punchy headlines and get hard to read once a line runs long.
Give prices and accents the right voice
Section titled “Give prices and accents the right voice”- Price typeface chooses whether the price uses the Heading font (the default) or the Body font. Switch to the body font when your heading font is a display serif, since numerals in display faces can read unevenly.
- Italic accents adds italic styling on serif looks: None (the default), Labels only, or Labels and body text. It is a small touch with a soft, editorial effect, so preview a product page before you commit to the wider option.