Skip to content

Typography

This guide describes the Theme settings > Typography menu options.

Use the menu options to set how text is displayed throughout your store. Refer to Shopify help: Typography.

An example store's home page with the Theme setting's Typography menu open in Theme editor.

The previous image shows a store's home page. In the upper left, part of Theme editor's Theme settings > Typography menu is displayed. The menu's Header > Uppercase checkbox option is checked (set to on). On the right, this setting uses uppercase text to display the header's menu items.

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

Set up typography

To set how text is displayed throughout your store:

  1. In Theme editor, go to Theme settings > Typography.

    Theme editor's Typography Theme settings menu.

  2. Select a setting described in the following table.

Setting nameDescription
Base font sizeAdjust the Base font size slider to set a size for the base font in pixels or px. All text throughout your store is scaled relative to the base font size. The minimum size is 13 px, and the maximum is 22 px.
Headings > HeadingsUse the Headings font picker to select a font for heading text. Refer to Set up fonts.
Headings > UppercaseSelect the Uppercase checkbox to turn on/off uppercase for heading text.
Headings > UnderlineSelect the Underline checkbox to turn on/off underline for heading text.
Headings > LetterspacingAdjust 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.
Headings > Line heightAdjust the Line height slider to set the spacing between lines of text (line height). The minimum height is 0.8 and the maximum is 2.
Standard headings > Mobile font size scaleAdjust the Mobile font size scale slider to set a font size for standard heading text on mobile devices. Standard headings are used for section titles and main section headings. The minimum value is -2, and the maximum is 4.
Standard headings > Desktop font size scaleAdjust the Desktop font size scale slider to set a font size for standard heading text on desktop devices. Standard headings are used for section titles and main section headings. The minimum value is -2 and the maximum is 7.
Feature headings > Mobile font size scaleAdjust the Mobile font size scale slider to set a font size for feature heading text on mobile devices. Feature headings are used for product, collection, article and page templates. The minimum value is -2 and the maximum is 4.
Feature headings > Desktop font size scaleAdjust the Desktop font size scale slider to set a font size for feature heading text on desktop devices. Feature headings are used for product, collection, article and page templates. The minimum value is -2 and the maximum is 7.
Secondary headings > Mobile font size scaleAdjust the Mobile font size scale slider to set a font size for secondary heading text on mobile devices. Secondary headings are used for the blog post grid, text columns, and other secondary headings. The minimum value is -2 and the maximum is 4.
Secondary headings > Desktop font size scaleAdjust the Desktop font size scale slider to set a font size for secondary heading text on desktop devices. Secondary headings are used for the blog post grid, text columns, and other secondary headings. The minimum value is -2 and the maximum is 7.
Body text > Body textUse the Body text font picker to select a font for body text. Refer to Set up fonts.
Body text > Line heightAdjust the Line height slider to set the spacing between lines of text (line height) for the body text. The minimum height is 1 and the maximum is 2.
Body text > UppercaseSelect the Uppercase checkbox to turn on/off uppercase for body text.
Section titles > FontUse the Font options to specify a font for section titles. Set Section title text to use the same font as Heading or Body text.
Section titles > Text alignUse the Text align options to align Section title text to the Left or Center.
Header > UppercaseSelect the Uppercase checkbox to turn on/off uppercase for header text.
Product grid > UppercaseSelect the Uppercase checkbox to turn on/off uppercase for text inside the product grid.
Buttons > UppercaseSelect the Uppercase checkbox to turn on/off uppercase for button (label) text.
Buttons > Show arrowSelect the Show arrow checkbox to turn on/off displaying an arrow symbol inside buttons.
Links > UppercaseSelect the Uppercase checkbox to turn on/off uppercase for link text, like social media share links or subscribe links.
Links > Show arrowSelect the Show arrow checkbox to turn on/off displaying an arrow symbol for link text, like social media share links or subscribe links.
Links > Show underlineSelect the Show underline checkbox to turn on/off underline for link text, like social media share links or subscribe links.

Set up fonts

To choose a font and font style for headings and body text:

  1. Go to Theme settings > Typography.

  2. In the Typography menu, locate the type of text you want to set up, like Headings or Body text.

  3. Select Change.

    For example, in the following image, Change is selected for Body 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 picker to select a font from the font sets described in the following table. Select Load more to access more fonts in each set.

    Font set nameDescription
    System fontsA 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.
    Other fontsFonts from Shopify's library that are not part of the default system 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, Light, Light Italic, Regular, Italic, Medium, Medium Italic, Semi Bold, Semi Bold Italic, Bold, Bold Italic, 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.

  7. At the top of the page, select Save.