The Typography settings choose the store's fonts and set the size of headings, paragraphs and small notes. To find them, open the theme editor. In the editor sidebar, click Theme settings, then select Typography. The font of buttons, links and prices is in Button settings.
The Typography group opens with the font settings, and the font sizes follow them.
Fonts
Setting
What it does
Body font
Paragraphs, product descriptions, form fields, labels and small notes. It is also the button font unless you change Button font.
Display font
Every heading and display size, and by default the menu links, View all links and prices.
Font scale
Makes text larger or smaller together, from 90% to 110%. Menu links in the font from Navigation font stay at 16 px.
Uppercase headings
Shows every heading in capital letters. Menu links follow it too, and so do View all links and other text links while Text link and price font is Display. On in the Checkmate style, off in Lair and Fang.
Same line height for headings
Gives every heading the same space between its lines. When it is off, large headings sit their lines closer together than small headings do. On in Lair and Fang.
Navigation font
The font of the menu links in the header, the mobile menu and Menu blocks, the top links of the side menu, and the row of collection links on a collection page. Display font is the default. Body font uses the body font. Custom lets you pick a third font in Custom navigation font, which shows only when Custom is selected.
Fonts come from Shopify's font library. Each style starts with its own pair: Oswald and Inter in Checkmate, Fraunces and Karla in Lair, Bricolage Grotesque and Figtree in Fang.
Font sizes
Each display and heading size is the size on a screen 1,512 px wide or wider. Narrower screens show it smaller, down to the smallest size in the table, so a large heading fits a phone. Paragraph and small text stay the same size on every screen. Font scale changes all of them.
Display sizes
The three largest sizes, for headings meant to fill the screen.
Setting
Range
Smallest on a phone
Used for
Display 1 size
80 to 200 px
40 px less
The Hero section's heading, the large 404 on the not found page, and the rating numbers in Testimonials.
Display 2 size
48 to 128 px
32 px less
The title at the top of collection, search, blog, blog post and content pages, and the numbers in Facts.
Display 3 size
32 to 96 px
24 px less
Most section headings, the product title on the product page, and the title of the cart page, the not found page and the password page.
Heading sizes
Setting
Range
Smallest on a phone
Used for
Heading 1 size
28 to 80 px
16 px less
The Card rail heading and the large heading of a Comparison section.
Heading 2 size
20 to 48 px
12 px less
Collection card titles, Promo list titles, FAQ questions in the card layout, and the Facts heading.
Heading 3 size
18 to 40 px
8 px less
The mega menu heading, the message in an empty cart drawer, and the message when a collection has no products.
Heading 4 size
16 to 32 px
4 px less
Product card titles, the cart and wishlist drawer titles, post titles in Blog posts, and the step numbers in Steps.
Heading 5 size
14 to 28 px
2 px less
Footer column headings, Highlights card titles, Specifications group titles, and the product tag ribbon on product cards.
Heading 6 size
12 to 24 px
The same
Mega menu link group headings, the group names in search suggestions, product names in the wishlist, and the author names in Testimonials.
Body sizes
Setting
What it sets
Paragraph size
The product description, form fields, and Text blocks set to Small. 12 to 20 px.
Small text size
Small notes such as blog tags, comment dates, form errors and Eyebrow text. 10 to 16 px.
The Text block's Typography setting picks one of these sizes for its own text: Display 1 to Heading 6 use the sizes above, Small uses Paragraph size, and Eyebrow uses Small text size. Medium, the default, and Large show at 16 px, changed only by Font scale.
The Typography settings choose the store's fonts and set the size of headings, paragraphs and small notes. To find them, open the theme editor. In the editor sidebar, click Theme settings, then select Typography. The font of buttons, links and prices is in Button settings.
The Typography group opens with the font settings, and the font sizes follow them.
Fonts
Setting
What it does
Body font
Paragraphs, product descriptions, form fields, labels and small notes. It is also the button font unless you change Button font.
Display font
Every heading and display size, and by default the menu links, View all links and prices.
Font scale
Makes text larger or smaller together, from 90% to 110%. Menu links in the font from Navigation font stay at 16 px.
Uppercase headings
Shows every heading in capital letters. Menu links follow it too, and so do View all links and other text links while Text link and price font is Display. On in the Checkmate style, off in Lair and Fang.
Same line height for headings
Gives every heading the same space between its lines. When it is off, large headings sit their lines closer together than small headings do. On in Lair and Fang.
Navigation font
The font of the menu links in the header, the mobile menu and Menu blocks, the top links of the side menu, and the row of collection links on a collection page. Display font is the default. Body font uses the body font. Custom lets you pick a third font in Custom navigation font, which shows only when Custom is selected.
Fonts come from Shopify's font library. Each style starts with its own pair: Oswald and Inter in Checkmate, Fraunces and Karla in Lair, Bricolage Grotesque and Figtree in Fang.
Font sizes
Each display and heading size is the size on a screen 1,512 px wide or wider. Narrower screens show it smaller, down to the smallest size in the table, so a large heading fits a phone. Paragraph and small text stay the same size on every screen. Font scale changes all of them.
Display sizes
The three largest sizes, for headings meant to fill the screen.
Setting
Range
Smallest on a phone
Used for
Display 1 size
80 to 200 px
40 px less
The Hero section's heading, the large 404 on the not found page, and the rating numbers in Testimonials.
Display 2 size
48 to 128 px
32 px less
The title at the top of collection, search, blog, blog post and content pages, and the numbers in Facts.
Display 3 size
32 to 96 px
24 px less
Most section headings, the product title on the product page, and the title of the cart page, the not found page and the password page.
Heading sizes
Setting
Range
Smallest on a phone
Used for
Heading 1 size
28 to 80 px
16 px less
The Card rail heading and the large heading of a Comparison section.
Heading 2 size
20 to 48 px
12 px less
Collection card titles, Promo list titles, FAQ questions in the card layout, and the Facts heading.
Heading 3 size
18 to 40 px
8 px less
The mega menu heading, the message in an empty cart drawer, and the message when a collection has no products.
Heading 4 size
16 to 32 px
4 px less
Product card titles, the cart and wishlist drawer titles, post titles in Blog posts, and the step numbers in Steps.
Heading 5 size
14 to 28 px
2 px less
Footer column headings, Highlights card titles, Specifications group titles, and the product tag ribbon on product cards.
Heading 6 size
12 to 24 px
The same
Mega menu link group headings, the group names in search suggestions, product names in the wishlist, and the author names in Testimonials.
Body sizes
Setting
What it sets
Paragraph size
The product description, form fields, and Text blocks set to Small. 12 to 20 px.
Small text size
Small notes such as blog tags, comment dates, form errors and Eyebrow text. 10 to 16 px.
The Text block's Typography setting picks one of these sizes for its own text: Display 1 to Heading 6 use the sizes above, Small uses Paragraph size, and Eyebrow uses Small text size. Medium, the default, and Large show at 16 px, changed only by Font scale.