Design
Typography
Choose heading and body fonts in Vellora, scale text sizes, and set letter case and spacing for headings and buttons.
Vellora uses two fonts: one for headings and one for body text. Both come from the Shopify font library, so they're hosted by Shopify and need no extra setup. Change them under Theme settings → Typography.
Headings
| Setting | What it does |
|---|---|
| Heading font | The font for every heading, the large footer store name and display text. |
| Heading size | Scales every heading size together, from 80% to 150%. |
| Heading letter case | Default keeps your text as typed. Uppercase capitalizes every heading. |
| Heading letter spacing | Tightens or loosens headings, from −6% to 4%. Negative values suit large display fonts. |
Body text
| Setting | What it does |
|---|---|
| Body font | The font for paragraphs, prices, forms, menus and buttons. |
| Body size | Scales body text from 90% to 120%. At 100%, body text is 16 px. |
| Button and label letter case | Uppercase capitalizes buttons, quick add buttons and similar labels, and adds a little letter spacing so they stay legible. |
Eyebrow labels, the small text above many headings, are always uppercase and use the accent color of the section's scheme.
Heading sizes
Headings grow with the screen width, between a minimum on phones and a maximum on wide screens. These are the sizes at a heading size of 100%:
| Style | Phone | Wide screen | Used for |
|---|---|---|---|
| Display extra large | 48 px | 96 px | Hero collage heading, large collection banners |
| Display | 40 px | 70 px | Hero and banner headings |
| H1 | 34 px | 52 px | Page titles |
| H2 | 28 px | 40 px | Most section headings |
| H3 | 22 px | 28 px | Quick view titles and smaller headings |
| H4 | 20 px | 20 px | Drawer and pop-up titles |
Most sections map the Heading size setting like this: Small uses the H3 style, Medium H2, Large H1 and Extra large Display. The Collection banner and Page sections start one step larger, so their Medium uses H1, Large uses Display and, in Collection banner, Extra large uses Display extra large.
Many sections have a Heading size setting, for example Featured collection, Image banner, Image with text, Rich text and Email signup. It changes how big the heading looks. It doesn't change the heading level, so the page structure stays correct for screen readers and search engines.
Italic emphasis in headings
Headings that use inline rich text let you set part of the heading in italics. Select the words in the theme editor and press the italic button. The presets use this for headings such as "Quiet things, well made."
Vellora loads the italic and bold styles of your heading font for this. If a font has no italic style, the browser slants the regular style instead, which can look rough. Preview your heading after you change fonts.
The preset fonts
| Preset | Headings | Body | Other settings |
|---|---|---|---|
| Vellora | Playfair Display | Inter | Heading letter spacing −1% |
| Sorrel | Cormorant, medium weight | Jost | Heading size 115% |
| Graphite | Archivo, extra bold | Archivo | Heading size 110%, uppercase headings and labels, letter spacing −2% |
Tips
- Pair contrast with restraint. A serif or display font for headings and a plain sans serif for body text is the safest pairing. If you use one family for both, as Graphite does, set a heavier weight for headings.
- Check long words on phones. Large display headings with long words can wrap awkwardly on narrow screens. Lower Heading size or the section's heading size if they do.
- Fonts load as you need them. Fonts use
font-display: swap, so text shows right away in a fallback font while the web font loads. Browsers only download the styles a page actually uses. - Keep uppercase short. Uppercase works for short headings and labels. For long headings, it slows reading.