# Typography

This guide describes the Theme settings > Typography menu options to set how text is displayed throughout your store. Refer to Shopify help: Typography (opens new window).

In the following video, an Image with text overlay section is displayed on a store’s homepage. To increase the size of the text, in Theme settings > Typography, the Base font size slider value is changed from 13px to 22px (pixels). In the video, the size of the section’s title text increases.

For general guidance with adjusting a theme setting, refer to Settings overview and Shopify help: Theme settings (opens new window).

# Base font

To set a size and line height for the base font, in Theme settings > Typography:

  • Base font size. Adjust the Base font size slider to set a size for the base font in pixels or px. The minimum size is 13 px, and the maximum is 22 px. All text throughout your store is scaled relative to the base font size.

  • Line height. Adjust the Line height slider to set the spacing between lines of text (line height) for the base font. The minimum height is 1 and the maximum is 2.

    The Base font size and Line height sliders in Theme setting's Typography menu.

# Headings

To set how heading text is displayed throughout your store:

  1. Go to Theme settings > Typography > Headings.

  2. Select a headings typography setting described in the following table.

Headings typography setting name Description
Font Use the font picker to select a font for headings. Refer to Setup fonts.
Uppercase Select the Uppercase checkbox to turn on/ off uppercase for headings.
Letter spacing Adjust 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.
Heading line height Adjust the Heading line height slider to set the spacing between lines of heading text. The minimum height is 1 and the maximum is 1.5.
Base size Use the Base size dropdown to set a size for heading text (titles). The size is applied to section titles and main section headings. The dropdown options are:
  • S = Small
  • M = Medium
  • L = Large
  • XL = Extra large
  • 2XL = 2 x extra large
  • 2XL / Desktop 3XL = 2 x extra large on mobile devices, and 3 x extra large on desktop devices
  • 2XL / Desktop 4XL
  • 2XL / Desktop 5XL
  • 2XL / Desktop 6XL
  • 2XL / Desktop 7XL
Template size Select the Template size dropdown to set a text size for template headings. This setting applies to product, collection, article, and page templates. The dropdown options are: S, M, L, XL, 2XL, and from 2XL / Desktop 3XL up to 2XL / Desktop 9XL.
Secondary size Use the Secondary size dropdown to set a text size for secondary headings. This setting applies to the blog post grid, text columns with images, and other secondary headings. The dropdown options are: S, M, L, XL, and 2XL.

Note

Shapes provides styling options for headings in Theme settings > Headings. Refer to Headings.

# Main

To set a font for main text:

  1. Go to Theme settings > Typography > Main.

  2. Use the font picker to select a font for main text. Refer to Setup fonts.

    The Main font setting controls in Theme settings' Typography menu.

# Extras

To further customize your store’s typography, Shapes provides the following additional options in Theme settings > Typography > Extra.

Extra typography setting name Description
Navigation font Select the Navigation font dropdown to set the text inside the navigation area to use the same font as Body or Heading text.
Uppercase navigation Use the checkbox Uppercase navigation to turn on/ off uppercase for text inside the navigation area.
Uppercase product tiles Select the checkbox Uppercase product tiles to turn on/ off uppercase for the text inside product tiles.
Uppercase buttons Use the checkbox Uppercase buttons to turn on/ off uppercase for the text inside buttons (button label text).
Uppercase stickers Select the checkbox Uppercase stickers to turn on/ off uppercase for the text inside stickers.
The Extra font setting controls in Theme settings' Typography menu.

# Setup fonts

To setup fonts and font styles:

  1. Go to Theme settings > Typography.

  2. In the Typography menu, locate the type of text you want set up (Headings or Main text).

    A list of the types of text with font pickers in the Font area of Theme setting's Typography menu.
  3. Select Change.

    For example, in the following image, Change is selected for Headings text.

    The Change button for selecting a font in Theme setting's Typography menu.
  4. In the Search box, enter the name of a font.

    Alternatively, use the font pick to select 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. Refer to Shopify help: Fonts (opens new window).

    • 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 font picker's font sets in Theme setting's Typography menu.
  5. Inside the font picker area, use the dropdown to select a font style (if available).

    Font styles include Thin, Thin Italic, Extra Light, Extra Light Italic, Regular, Italic, Medium, Medium Italic, Bold, Extra Bold, Extra Bold Italic, Black and Black Italic.

    The font picker's font styles dropdown in Theme setting's Typography menu.
  6. Choose Select.

    The font picker's select button in Theme setting's Typography menu.