Skip to content

Typography

Typography settings control which fonts your store uses and how large they appear. You'll find them in Theme settings > Typography.

Choosing your fonts

You have two font pickers. The heading font appears on page titles, section headings, and product names. The body font appears everywhere else — descriptions, navigation, buttons, and general text.

Typography

Used for titles and section headings.

Used for paragraphs, menus, and buttons.

100%

Scales all headings up or down together.

16px

Base paragraph size. Other text scales from this.

Heading hierarchy

Page Title (H1)

Section Heading (H2)

Sub-heading (H3)

Minor heading (H4)

Small heading (H5)
Smallest heading (H6)

Body text looks like this. It's used for product descriptions, page content, and anything that isn't a heading.

Preset font pairings

Each preset comes with a font pairing designed for its target industry. You don't need to change fonts unless you want to — the presets are ready to go.

PresetHeading fontBody fontFeel
UisceAssistant (Bold)Assistant (Regular)Clean, modern
GaothWork Sans (Semi-Bold)Work Sans (Regular)Warm, approachable
TalamhPlayfair Display (Bold)Source Sans Pro (Regular)Elegant, classic
TineOswald (Bold)Roboto (Regular)Strong, industrial
NeartLora (Bold)Nunito Sans (Regular)Soft, refined

Heading scale

The heading scale slider (80%–150%) changes all heading sizes together. At 100%, headings use their default sizes. Drag it up to make headings more prominent, or down for a more understated look.

  • 80% — Compact and quiet. Good for text-heavy pages.
  • 100% — The default. Balanced for most stores.
  • 120–150% — Big and bold. Works well with short headings and visual products.

Body font size

This slider (14–20px) sets the base size for paragraph text. Everything else — navigation, captions, form labels — scales relative to this number.

Most stores work well at 16px (the default). Bump it up to 18px if your audience skews older or your product descriptions are the main selling point.

Tips

  • Pair a decorative heading font with a clean body font. Playfair Display + Source Sans Pro is a classic example. Two decorative fonts compete for attention.
  • Stick to two fonts. Each font adds to your page load time. More than two also tends to look cluttered.
  • Test on mobile. Elaborate display fonts can be hard to read at small sizes. Preview your store in the editor's mobile view before publishing.
  • Like a preset's colours but not its fonts? Just change the font pickers. You don't need to switch presets.

Built for the Shopify Theme Store.