Typography controls
The Typography tab sets how text looks everywhere — the fonts for headings and body, their sizes, and their weights. Type carries a lot of a store's personality, so these few controls change the feel of the whole site.
Typography reference
| Group | Control | Options | What it does |
|---|---|---|---|
| Fonts | Heading font family | font picker (customFonts + curatedFonts, ~22 curated grouped by category) | The font for headlines. This carries most of your store's personality — it's the first thing a visitor reads and the thing they remember. |
| Fonts | Body font family | font picker (customFonts + curatedFonts, ~22) | The font for everything people actually read. Choose for legibility at small sizes before character; a beautiful body font that's hard to read costs you sales. |
| Fonts | Display / accent font | font picker + "none" = inherit from heading | An optional third font for hero text and pull quotes. Used anywhere else it starts to look busy. |
| Fonts | Custom font upload | file upload .woff2/.woff/.ttf/.otf | Upload a licensed font of your own. Check your licence covers web use before you do. |
| Weight | Heading weight | 300/400/500/600/700/800/900 (7 toggle buttons) | How heavy headlines are. Heavier reads more confident and more commercial; lighter reads more editorial. |
| Weight | Body weight | 300/400/500/600 (4 toggle buttons) | The weight of running text. Too heavy tires the eye over a long page. |
| Spacing | Heading letter spacing | -0.03em / -0.02em / -0.01em / 0 / 0.02em / 0.04em / 0.06em (7 toggle buttons) | The gap between letters in headings. Tightening slightly makes large headlines look deliberate; loosening suits small uppercase labels. |
| Transform | Heading text transform | none / uppercase / capitalize (3 toggle buttons) | Whether headings render as typed, ALL CAPS, or Title Case. Caps suit short labels and get shouty over a full sentence. |
| Scale | Type scale ratio | 1.25 Compact / 1.333 Classic / 1.414 Bold / 1.618 Golden (4 toggle buttons) | How much bigger each heading level is than the one below it. A small ratio reads calm and editorial; a large one gives dramatic headlines and can crowd a phone screen. |
9 controls in this group. Generated from the live theme-control matrix.
What happens — and what doesn't
- Typography is store-wide: a font choice restyles every heading or paragraph at once.
- Heading and body fonts can differ, which is how you pair a display font with a readable body font.
- Changes preview live and publish with the rest of your theme.
Can I use different fonts for headings and body text?
Yes. Typography lets you set separate fonts, sizes, and weights for headings and body, so you can pair a display font with a readable body font.
Do font changes apply to every page?
Yes — typography is a store-wide theme setting, so it restyles text across the whole storefront.