Typography
Body, heading and accent fonts, and how large they render.
What it controls
Three fonts and two sizes. Body font is used for paragraphs, buttons, navigation and everything that is not a heading. Heading font is used for headings at every size. Accent font is used for the words you highlight inside a heading (the Heading accent setting on most sections) and for pull quotes, such as the guarantee quote and testimonials.
Heading scale enlarges or shrinks every heading in the theme at once, in percent. Mobile headings follow at 85 percent of the desktop size. Body size is the base text size in pixels; small text and labels are derived from it.
How it connects
Every section reads these settings. Sections that let you pick a Heading size (large, medium, small, extra small) pick from the same scale, so changing the scale here moves them all together. The Heading accent setting on a section (words, full, off) decides whether the accent font is used for the words in braces, for the whole heading, or not at all.
Setting it up
- Choose a Body font with at least regular and bold weights. Munich uses the bold weight for prices and emphasis.
- Choose a Heading font. It can be the same family as the body font in a medium weight; that is the default pairing.
- Choose an Accent font. Try an italic serif first.
- Leave Heading scale at 100 until the content is in. Then adjust in steps of 5.
Settings
| Setting | Type | What it does |
|---|---|---|
| Fonts | ||
| Body font | Font | Paragraphs, buttons, navigation, prices and labels. Pick a family with a regular and a bold weight.Default: dm_sans_n4 |
| Heading font | Font | Every heading, at every size. Can be the same family as the body font in a heavier weight.Default: dm_sans_n5 |
| Accent font | Font | The words you highlight inside a heading and the pull quotes in guarantee and testimonial cards. An italic serif gives the editorial look.Default: dm_serif_display_n4 |
| Type scale | ||
| Heading scale | Range | Enlarges or shrinks every heading in the theme at once. Mobile headings follow at 85 percent, so there is no separate mobile size.80 to 130 % · Default: 100 |
| Body size | Range | The base text size. Small text, captions and labels are derived from it.14 to 18 px · Default: 16 |
Tips
- The accent font is what makes Munich look like Munich. An italic serif works best; a second sans serif makes the highlighted words disappear.
- Shopify serves the fonts in the font picker from its own servers, so a change here does not slow the store down. A font you upload yourself needs custom code and is not covered by support.
- Body size 16 px is the reading size most people expect. Go to 17 or 18 for a text heavy store, not for a store that wants to look bigger.