Typography

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. Selecting a different font can affect the speed of your store.

• System fonts: fonts that are already installed on most computers.
• Other fonts: fonts that may need downloading before being displayed

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

#Body

The Body text settings control the main content text, such as paragraphs, product descriptions, and general site information.

• Font family: Choose a font for the body text. Example: "Inter".

• Bolder font weight: Set how bold certain text elements should appear.
  • Medium
  • Semi bold
  • Bold
  • Extra bold
  • Black
• Font size scale: Adjust the size of the body text relative to the default size (90 - 150%).

#Headings

Headings help structure the content and improve readability. These settings apply to titles and section headings throughout the store.

• Font family: Choose a font for headings. Example: "Fahkwang".

• Font size scale: Adjust the heading size percentage (90 - 150%).
• Mobile font size scale: Set a different heading size for mobile devices to optimize responsiveness (70 - 120%).
• Letter spacing: Modify spacing between letters to create a unique style (-5 - 10px).
• Uppercase headings: Enable this option to display all headings in uppercase letters.

#Highlight text

Highlight text is used to emphasize key information.

• Font family: Select whether to match the Headings font or Use custom font.
• Custom font: If enabled, choose a unique font (e.g., "Assistant").

#Mega title

Mega titles are extra-large headings, typically used for hero sections or banners.

• Font family: Select whether to match the Headings font or Use custom font.
• Custom font: If enabled, choose a unique font (e.g., "Assistant").

• Font size scale: Adjust the size of the mega title (400 - 800%).
• Uppercase mega title: Enable to display mega titles in all capital letters.

#Subheading

Subheadings are smaller titles that support main headings.

• Font size scale: Adjust the subheading size (70 - 150%).
• Font family: Select whether to match the Headings font or Body font.
• Font weight: Choose how bold subheadings appear.
  • Light
  • Regular
  • Medium
  • Semi bold
  • Bold
  • Extra bold
  • Black
• Letter spacing: Adjust the spacing between characters (-5 - 10px).
• Text transform: Set whether the text should remain Normal, UPPERCASE, lowercase, or Title Case.

#Product cards title

• Font size scale: Adjust the size of product titles (80 - 150%).
• Font family: Select whether to match the Headings font or Body font.
• Font weight: Choose how bold product cards title appear.
  • Light
  • Regular
  • Medium
  • Semi bold
  • Bold
  • Extra bold
  • Black
• Uppercase product title: Toggle uppercase formatting for product names.

#Navigation

Navigation typography settings affect menu items in the store header.

• Font family: Select whether to match the Headings font or Body font.
• Font weight: Choose how bold navigation items appear.
  • Light
  • Regular
  • Medium
  • Semi bold
  • Bold
  • Extra bold
  • Black
• Uppercase navigation: Enable to display all menu items in uppercase.

#Buttons

The typography settings for buttons help define their visibility and style.

• Font family: Select whether to match the Headings font or Body font.
• Font weight: Choose how bold button text appears.
  • Light
  • Regular
  • Medium
  • Semi bold
  • Bold
  • Extra bold
  • Black
• Height: Modify the button height (24 - 80px).
• Corner radius: Adjust the button's rounded corners (0 - 50px).
• Uppercase label: Enable to make button text uppercase.