Appearance

Typography ​

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

In the following video, a blog posts 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 14px to 16px (pixels).

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

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.

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: Heading, 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, 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.

Headings ​

To set up text effects and a text size for headings (titles):

  1. Go to Theme settings > Typography > Headings.

  2. Select from the following options.

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

    • Center page titles. Use the Center page titles checkbox to turn on/ off center aligning page title text.

    • Letterspacing. Use 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.

    • Template heading size. Use the dropdown Template heading size to set the heading text size to Small, Medium, Large, or Extra Large. This setting applies to product, article, and page templates.

      The Headings options in Theme setting's Typography menu.

Text overlay ​

To set up text effects and a text size for overlaid text (text overlays):

  1. Go to Theme settings > Typography > Text overlay.

  2. Select from the following options.

    • Letterspacing. Adjust 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 heading size. Use the dropdown Text overlay heading size to set the text overlay heading size to Medium, Large or Extra Large.

      The Text overlay options in Theme setting's Typography menu.

Product grid ​

To set up how text is displayed inside the product grid:

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

  2. Select from the following options.

    • Font. Select the Font dropdown to set text inside the product grid to use the same font as Secondary or Body text.

    • Align. Select the Align dropdown to align the text inside the product grid to the Left or Center.

    • Font weight. Select the Font weight slider to set a weight for text inside the product grid (if available). The options are: -200, -100, Default, +100 and +200.

      The Product grid options in Theme setting's Typography menu.

Section headings ​

To configure section heading (title) text:

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

  2. Select from the following options.

    • Font size. Use the Font size dropdown to set the section header font size to Small, Medium, Large or Extra Large.

    • Center section headings. Use the checkbox Center section headings to turn on/ off center aligning section title (heading) text.

      The Section headings options in Theme setting's Typography menu.

Secondary (headings) ​

To set up secondary heading text (used for links and buttons):

  1. Go to Theme settings > Typography > Secondary.

  2. Select from the following options.

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

    • Letterspacing. Use 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.

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

    • Button baseline adjustment. Use 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.

      The Secondary options in Theme setting's Typography menu.

Rich text editor ​

To set a font size for text inside the rich text editor:

  1. Go to Theme settings > Typography > Rich text editor.

  2. Select the Font size dropdown to set the rich text editor's font size to Small, Medium or Large.

    The Rich text editor options in Theme setting's Typography menu.

Border ​

To set a width for borders:

  1. Go to Theme settings > Typography > Border.

  2. Select the Width dropdown to set the border width to 0, 1 or 2 px (pixels).

    The Border options in Theme setting's Typography menu.