# Typography

This guide describes the Theme settings > Typography menu options to set how text is displayed throughout your store.

For general guidance with adjusting a theme setting, refer to Settings.

# Base font size

To set a size for the base font:

  1. Go to Theme settings > Typography.

  2. Use the Base font size slider to set a size for the base font in pixels or px.

    The minimum base font size is 12 px and the maximum is 22 px. All text throughout your store is scaled relative to the base font size.

    The base font slider in the typography section of the theme settings menu

Refer to Adjust text sizes.

# Headings (Font and text style)

To set a font and text style for headings:

  1. Go to Theme settings > Typography > Headings.

  2. Select Change, and then use the Headings font picker to select a font for headings.

    Alternatively, enter the name of a font into the font Search box.

    The heading font picker in the typography section of the theme settings menu
  3. Choose a font from the following font sets.

    • System fonts. A set of default system fonts. System fonts load quickly and their appearance might change according to the visitor’s device type and web browser.

    • Other fonts. Fonts from Shopify’s library that are not part of the default system font set.

    • Load more. Select Load more to access more fonts in each font set.

      The heading font set picker in the typography section of the theme settings menu
  4. To style headings, select the following controls.

    • Uppercase. Use the Uppercase checkbox to turn on/ off uppercase for headings.

    • Underline. Use the Underline checkbox to turn on/ off underlining for headings.

    • Letterspacing. Use the Letterspacing slider to set the spacing between headings and lines of body text. The minimum slider value is -50 and the maximum is 200.

      The base font slider in the typography section of the theme settings menu

    For additional heading styles, use the dropdown inside the Headings font picker to set the heading text style to: Thin, Thin Italic, Extra Light, Extra Light Italic, Regular, Italic, Medium, Medium Italic, Bold, Extra Bold, Extra Bold Italic, Black and Black Italic.

    The heading text style dropdown in the typography section of the theme settings menu

# Heading sizes

To set text sizes for headings:

  1. Go to Theme settings > Typography > Headings > Heading sizes.

  2. Use the dropdowns to a set size, like S/ Small, M/ Medium or L/ Large, for the following groups of headings.

    • Base size. Set the text size for section titles and main section headings.

    • Template size. Set the heading text size for product, collection, article and page templates.

    • Secondary size. Set the text size for the blog post grid, text columns with images, and other secondary headings.

      The heading group dropdown in the typography section of the theme settings menu

Refer to Adjust text sizes.

# Body text

To set a font and text style for body text:

  1. Go to Theme settings > Typography > Body text.

  2. Select Change, and then use the Body text font picker to select a font for body text.

    Alternatively, enter the name of a font into the font Search box.

    The body text font picker in the typography section of the theme settings menu
  3. Choose a font from the following font sets.

    • System fonts. A set of default system fonts. System fonts load quickly and their appearance might change according to the visitor’s device type and web browser.

    • Other fonts. Fonts from Shopify’s library that are not part of the default system font set

    • Load more. Select Load more to access more fonts in each font set.

      The body text font set picker in the typography section of the theme settings menu
  4. To style body text, select the following controls.

    • Line height. Use the Line height slider to set the spacing between lines of body text. The minimum slider value is 1 and the maximum is 2.

    • Uppercase. Use the Uppercase checkbox to turn on/ off uppercase for body text.

      The body text style controls in the typography section of the theme settings menu

    For additional body text styles, use the dropdown inside the Body text font picker to set the body text style to: Thin, Thin Italic, Extra Light, Extra Light Italic, Regular, Italic, Medium, Medium Italic, Bold, Extra Bold, Extra Bold Italic, Black and Black Italic.

    The body text style dropdown in the typography section of the theme settings menu

# Section titles

To set a font and text style for section titles:

  1. Go to Theme settings > Typography > Section titles.

  2. Select the following controls.

    • Font. Use the Font dropdown to set section titles to the same font as Heading or Body text.

    • Text align. Use the Text align dropdown to Left or Center align section titles.

      The section titles text controls in the typography section of the theme settings menu

To set a text style for headers:

  1. Go to Theme settings > Typography > Header.

  2. Use the Uppercase checkbox to turn on/ off uppercase for headers.

    The header uppercase checkbox in the typography section of the theme settings menu

# Product grid

To set a text style for text within the product grid:

  1. Go to Theme settings > Typography > Product grid.

  2. Use the Uppercase checkbox to turn on/ off uppercase for text within the product grid.

    The product grid uppercase checkbox in the typography section of the theme settings menu

# Buttons (Products)

To set a text style for buttons on product pages:

  1. Go to Theme settings > Typography > Buttons.

  2. Select the following checkboxes.

    • Uppercase. Use the Uppercase checkbox to turn on/ off uppercase for button text on product pages.

    • Show arrow. Use the Show arrow checkbox to turn on/ off the arrow icons inside buttons on product pages.

      The buttons checkboxes in the typography section of the theme settings menu

To set a text style for buttons that contain hyperlinks or “linked buttons”:

  1. Go to Theme settings > Typography > Links.

  2. Select the following checkboxes.

    • Uppercase. Use the Uppercase checkbox to turn on/ off uppercase for linked buttons.

    • Show arrow. Use the Show arrow checkbox to turn on/ off arrow icons inside linked buttons.

    • Show underline. Use the Show underline checkbox to turn on/ off underling for linked buttons.

      The links button checkboxes in the typography section of the theme settings menu

    Enabling underlining for link text defaults to the grid border width. If underlined links are enabled, and the grid border width is set to 0, the width will be 1px.