Skip to content

Typography

Under Theme settingsTypography, three fonts and a handful of numbers set the type for the whole store.

  • Heading font is for every heading.
  • Body font is for everything else: paragraphs, prices, menus, forms.
  • Accent font is a small supporting face: the short line above a heading, product vendors, categories, labels. It is often the same as the body font in a heavier weight, set as uppercase with a little letter spacing.

All three come from Shopify’s font library, which covers most brand faces and loads quickly on every store. The theme has no font upload; if your brand uses a face that is not in the library, choose the closest match here and ask FourCore support about the options.

Heading weight picks the weight; if the font does not come in that weight, the closest it has is used. Largest heading size sets the top of the scale for computers and tablets, and Largest heading size on mobile for phones. Every smaller heading is worked out from it by Heading size steps, from Subtle to Dramatic, so the headings keep their relationship to each other however large you go.

Heading line height, Heading letter spacing and Heading style (normal or uppercase) finish the look.

Base size on tablet and desktop and Base size on mobile set the body text. Sixteen and fifteen are comfortable defaults. Body weight, Body line height (around 160 percent reads well) and Body letter spacing adjust it. Hyphenate long words helps narrow columns on phones.

Its own weight, size for each screen, line height, letter spacing and case. Small, uppercase and slightly spaced is the usual choice.

Some sections have their own heading size, because a banner heading needs to be far larger than a page heading. Those sizes are in pixels on the section, with a separate value under its Mobile layout. Buttons have their own type settings under Theme settingsButtons.