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.

In the previous video, a blog posts section is displayed on a store's home page. To increase the size of the text, in Theme settings > Typography, the Base font size slider value is changed from 14px to 16px (pixels).

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

Configure typography

To set how text is displayed throughout your store:

  1. Go to Theme settings > Typography.

    The Theme setting's Typography menu in Theme editor

  2. Select a typography 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. 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 heightAdjust 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.
Fonts > HeadingsUse the Headings font picker to select a font for heading text. Refer to Set up fonts.
Fonts > BodyUse the Body font picker to select a font for body text. Refer to Set up fonts.
Fonts > SecondaryUse the Secondary font picker to select a font for secondary text. Refer to Set up fonts. Secondary text is used for links and buttons.
Headings > CapitalizeUse the Capitalize checkbox to turn on/off uppercase for headings.
Headings > Center page titlesUse the Center page titles checkbox to turn on/off center aligning page title text.
Headings > LetterspacingUse the Letterspacing slider to set the spacing between headings and lines of body text. The minimum slider value is 0 and the maximum is 5.
Headings > Template heading sizeUse the Template heading size options to set the heading text size to Small, Medium, Large, or Extra Large. This setting applies to product, article, and page templates.
Text overlay > LetterspacingAdjust the Letterspacing slider to set the spacing between overlaid headings and lines of overlaid body text. The minimum slider value is 0 and the maximum is 5.
Text overlay > Text overlay heading sizeUse the Text overlay heading size options to set the text overlay heading size to Medium, Large or Extra Large.
Product grid > FontSelect the Font options to set text inside the product grid to use the same font as Secondary or Body text.
Product grid > AlignSelect the Align options to align the text inside the product grid to the Left or Center.
Product grid > Font weightSelect the Font weight options to set a weight for text inside the product grid (if available). The options are: -200, -100, Default, +100 and +200.
Section headings > Font sizeUse the Font size options to set the section header font size to Small, Medium, Large or Extra Large.
Section headings > Center section headingsUse the checkbox Center section headings to turn on/off center aligning section title (heading) text.
Secondary > CapitalizeUse the Capitalize checkbox to turn on/off uppercase for secondary headings.
Secondary > LetterspacingUse the Letterspacing slider to set the spacing between secondary headings and lines of body text. The minimum slider value is 0 and the maximum is 5.
Secondary > Show arrows on buttonsUse the Show arrows on buttons checkbox to turn on/off displaying arrow icons inside buttons.
Secondary > Button baseline adjustmentUse the Button baseline adjustment slider to set a position for button label text, inside buttons. The minimum slider value is -200 and the maximum is 200.
Rich text editor > Font sizeSelect the Font size options to set the rich text editor's font size to Small, Medium or Large.
Border > WidthSelect the Width options to set the border width to 0, 1 or 2 px (pixels).

Set up fonts

To choose a font and font style for heading (title), body, and secondary text:

  1. Go to Theme settings > Typography > Fonts.

  2. Locate the type of text you want set up: Headings, Body or Secondary text.

    A list of the types of text in the Font area of Theme setting's Typography menu.

  3. Select Change.

    For example, in the following image, Change is selected for Secondary 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.

    • 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, 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.