Typography

This page lists out the various typographic styles in a theme, where to find them, and any settings.

Shared settings for each typographic style are listed in a final section at the bottom of the page.

Headings

Headings refer to to the text that is used to group a document into sections, including product and section titles.

• Enable heading accents: Heading accents refer to decorative count/number elements that may appear next to certain headings. This can be enabled or disabled at a global level with this setting.

Subheadings

Subheadings are typically found above subheadings. Subheadings are also called 'eyebrow text', 'eyebrow headlines'. The subheading size is determined by the font scale of the headings section.

Body font

Body font refers to the basic fonts on a page that appears as inline paragraph text.

Buttons

Button text refers to text within buttons. You can also adjust the button padding in this section.

Text buttons

Text buttons are buttons that appear without a border or background, and with an underline. They derive their style from the buttons section. You can choose to show an arrow as a form of decoration here.

Captions

Captions are a smaller style of text used to compliment body text. This is used for navigation links, prices, dropdowns, badges, etc.

Sidebar menu

This refers to the style of text found in the mobile sidebar menu.

Search

For the search input, you can choose between the heading and body font.

Icon sizes

Choose between small, medium or large to control how icons are displayed across the theme.

Shared Settings

Each type style may contain or more of the following settings. A detailed explanation of each setting is below.

• Font: Select a font family from Shopify's custom fonts. Outside of the heading and body fonts, you can choose which font family to reference, heading or body.

• Font size: The font size scale allows you control the font sizes relative to other typographical elements. For example, if you want large headings and a small body font, you could increase your heading font size and decrease the body font size here.

For a better user experience, headings in pop-ups and small containers are restricted to "Medium" or smaller.

• Line height: Choose between None, Extra tight, Tight, Snug, Normal, Relaxed or Loose.

• Letter casing: Choose between Normal, Lowercase or Uppercase.

• Letter spacing: Choose a % value between -5% for tighter kerning or 20% for looser kerning.