Typography

The Typography panel controls the fonts and text sizing for your entire store. It lives under Theme settings in the theme editor. Pick your two fonts here, set the base text size, then fine-tune each text preset (headings, body, captions) so every section inherits the same type rules.

Open the panel

1. In the theme editor, click Theme settings (the gear icon in the left sidebar).
2. Click Typography.

Fonts and base size

These three settings sit at the top of the panel.

• Heading font: the font used for headings across the store. Click it to open Shopify's font picker, where you can choose a font and a weight.
• Body font: the font used for paragraphs, labels, and other running text.
• Base font size: the reference size that all text scales from. Changing it adjusts every text size in the store proportionally, so headings and body text grow or shrink together.

Text presets

Below the fonts is a Text presets header. Text presets apply consistent typography across the theme: a heading or text block points at one of these named presets, so editing a preset here updates every place it appears. You do not set the size on each text block one at a time; you point the block at a preset.

Each preset below has its own group of controls. The presets are, in order:

• Display
• Display small
• Heading 1
• Heading 2
• Heading 3
• Large
• Medium
• Small

Controls shared by every preset

Every preset has these controls.

• Size: the size of this preset as a percentage, relative to its built-in size. 100% is the default. Lower it to make the preset smaller, raise it to make it larger.
• Use different size on mobile: turn this on to set a separate size for phones. When off, mobile uses the same Size value.
• Mobile size: the percentage size used on phones. This appears only when Use different size on mobile is on.
• Line height: the vertical spacing between lines. Lower values pack lines tighter, higher values open them up.
• Thickness: the font weight for this preset. Choose Normal, Medium, or Bold.

Extra controls on heading and text presets

Heading 1, Heading 2, Heading 3, Large, Medium, and Small add three more controls. The Display and Display small presets do not have these.

• Letter spacing: the gap between characters, in pixels. Negative values tighten the letters, positive values spread them out.
• Text transform: how the letter casing renders. Choose None (as typed), Uppercase, Lowercase, or Capitalize (first letter of each word).
• Line wrap: how the browser breaks lines. Balance evens out line lengths so no single line is much shorter than the rest, which suits short headings. Pretty avoids leaving a single word alone on the last line, which suits longer text.

Tips

• The Size and Mobile size values are percentages of each preset's own built-in size, not pixel sizes. To scale the whole store at once, change Base font size instead of editing every preset.
• If headings look too tall or too loose after a font change, the new font may carry its own spacing. Adjust Line height and Letter spacing on the affected preset rather than changing the font back.
• Display and Display small are the largest presets, used for oversized hero text. If you do not see Letter spacing, Text transform, or Line wrap on a preset, you are on one of these two: those controls live only on the heading and text presets.