Typography

Typography allows setting the font, size of texts for the site.

1. From your Shopify admin, go to Online Store -> Themes.

2. Find the theme that you want to edit, and then click Customize.

3. Click Theme Settings -> Typography.

Headings

Setting	Description
Font	Choose from the popular Shopify Fonts (Selecting a different font can affect the speed of your store. Learn more about system fonts.)
Font size step	Determines the distance between 2 heading sizes option of the Heading size setting. For example: If you set Font size step is 2px and Font size (Desktop) is 42px, then on desktop version: + Option Medium of Heading size will be 42px. + Option Small of Heading size will be 42px - 2px = 40px. + Option Large of Heading size will be 42px + 2px = 44px. + Calculate same with the remaining options of Heading size.
Font size (Desktop)	Determines the font size for the Medium heading size on Desktop.
Font size (Tablet)	Determines the font size for the Medium heading size on Tablet.
Font size (Mobile)	Determines the font size for the Medium heading size on Mobile.
Heading size	The size of the heading text: XX-Small: is calculated by the formula + XX-Small Desktop = X-Small Desktop - Font size step. + XX-Small Tablet = X-Small Tablet - Font size step. + XX-Small Mobile = X-Small Mobile - Font size step. X-Small: is calculated by the formula + X-Small Desktop = Small Desktop - Font size step. + X-Small Tablet = Small Tablet - Font size step. + X-Small Mobile = Small Mobile - Font size step. Small: is calculated by the formula + Small Desktop = Medium Desktop - Font size step. + Small Tablet = Medium Tablet - Font size step. + Small Mobile = Medium Mobile - Font size step. Medium: + Medium Desktop = Font size (Desktop). + Medium Tablet = Font size (Tablet). + Medium Mobile = Font size (Mobile). Large: is calculated by the formula + Large Desktop = Medium Desktop + Font size step. + Large Tablet = Medium Tablet + Font size step. + Large Mobile = Medium Mobile + Font size step. X-Large: is calculated by the formula + X-Large Desktop = Large Desktop + Font size step. + X-Large Tablet = Large Tablet + Font size step. + X-Large Mobile = Large Mobile + Font size step. XX-Large: is calculated by the formula + XX-Large Desktop = X-Large Desktop + Font size step. + XX-Large Tablet = X-Large Tablet + Font size step. + XX-Large Mobile = X-Large Mobile + Font size step. XXX-Large: is calculated by the formula + XXX-Large Desktop = XX-Large Desktop + Font size step. + XXX-Large Tablet = XX-Large Tablet + Font size step. + XXX-Large Mobile = XX-Large Mobile + Font size step.
Heading letter spacing	Determines the letter spacing of heading. Can be from -5% to 10%, increasing arithmetically of 5%.

Body

Setting	Description
Font	Choose from the popular Shopify Fonts (Selecting a different font can affect the speed of your store. Learn more about system fonts.)
Font size step	Determines the distance between 2 text sizes option of the Text size setting. For example: If you set Font size step is 2px and Font size (Desktop) is 16px, then on desktop version: + Option Medium of Text size will be 16px. + Option Small of Text size will be 16px - 2px = 14px. + Option Large of Text size will be 16px + 2px = 18px. + Calculate same with the remaining options of Text size.
Font size (Desktop)	Determines the font size for the Medium text size on Desktop.
Font size (Tablet)	Determines the font size for the Medium text size on Tablet.
Font size (Mobile)	Determines the font size for the Medium text size on Mobile.
Text size	The size of the text: XX-Small: is calculated by the formula + XX-Small Desktop = X-Small Desktop - Font size step. + XX-Small Tablet = X-Small Tablet - Font size step. + XX-Small Mobile = X-Small Mobile - Font size step. X-Small: is calculated by the formula + X-Small Desktop = Small Desktop - Font size step. + X-Small Tablet = Small Tablet - Font size step. + X-Small Mobile = Small Mobile - Font size step. Small: is calculated by the formula + Small Desktop = Medium Desktop - Font size step. + Small Tablet = Medium Tablet - Font size step. + Small Mobile = Medium Mobile - Font size step. Medium: + Medium Desktop = Font size (Desktop). + Medium Tablet = Font size (Tablet). + Medium Mobile = Font size (Mobile). Large: is calculated by the formula + Large Desktop = Medium Desktop + Font size step. + Large Tablet = Medium Tablet + Font size step. + Large Mobile = Medium Mobile + Font size step. X-Large: is calculated by the formula + X-Large Desktop = Large Desktop + Font size step. + X-Large Tablet = Large Tablet + Font size step. + X-Large Mobile = Large Mobile + Font size step. XX-Large: is calculated by the formula + XX-Large Desktop = X-Large Desktop + Font size step. + XX-Large Tablet = X-Large Tablet + Font size step. + XX-Large Mobile = X-Large Mobile + Font size step. XXX-Large: is calculated by the formula + XXX-Large Desktop = XX-Large Desktop + Font size step. + XXX-Large Tablet = XX-Large Tablet + Font size step. + XXX-Large Mobile = XX-Large Mobile + Font size step.

How to set up Shopify Font?

Shopify's font library is a collection of fonts that includes system fonts, a selection of Google fonts, and licensed fonts from Monotype. These fonts are free to use on all Shopify online stores, and are provided in both WOFF and WOFF2 formats.