Typography

A guide to choose fonts for the website

Steps

  1. In the theme editor (Customize), click Theme settings.

  2. Locate Typography.

  3. Make necessary changes.

  4. Save.

Typography is considered one of the essential components that impact the website's look and feel. This article will show you how to edit your store typography.

Body text and Heading

You can choose between many existing fonts from the library.

The font that displays on your customer's computer depends on their operating system.

Body text

Choose the Font, then adjust the Base size and Bolder font weigh for highlight certain titles and labels.

To learn more about system font, see Shopify Manuals.

Headings

Choose the Font, then adjust the Font size, Mobile font size scale and Letter spacing on the mobile view. You also have the option to enable/disable Uppercase headings if necessary.

Display headings

Set the Base size for headings and enable/disable Uppercase display headings.

Subheadings

Set the Font size scale for Subheadings and choose the font as Body font/Headings font and the Font weight.

You can also adjust the Letter spacing and the Text transform as Normal, Title case, UPPER CASE, lowercase.

Product cards title

To set the Font size scale, Font family and Font weight for your Product card title. Enable or disable Uppercase headings if necessary.

Choose the font for your navigation as Body font/Headings font, Font weight options and enable/disable Uppercase navigation.

Buttons

Choose the font for your button labels as Body font/Headings font and enable/disable the Font weight options.

You can also adjust the Letter spacing and the Text transform as Normal, Title case, UPPER CASE, lowercase.

Last updated