HYPER theme
Try Hyper freeResourcesOther solutions
  • What is Hyper theme
  • Changelog
  • Refund policy
  • Support policy
  • Getting started
    • Install Hyper theme
    • Set up my store as Hyper demo
    • Update Hyper theme
    • Theme license & Transfer
  • Page's global sections
    • Announcement bar
    • Top bar
    • Header
      • Mega menu
      • Use Country/ Region selector
      • Use Language selector
    • Footer
    • Cart drawer
    • Popup
    • Product compare
    • Quick view
    • Spotlight picks
  • Theme sections
    • Banner with hotspots
    • Before/after image slider
    • Brand logos 🔥
    • Button group
    • Collapsible tabs
    • Collection list
    • Collection list slider
    • Collection tabs
    • Contact form
    • Countdown timer
    • Custom content
    • Custom liquid
    • Email signup
    • Favorite products 🔥
    • Featured blogs
    • Featured collection
    • Featured countdown timer 🔥
    • Featured product
    • Horizontal products list 🔥
    • Image with text
    • Image with text overlay
    • Image with text slider 🔥
    • Lookbook slider
    • Multicolumn
    • Multicolumn with icon
    • Press 🔥
    • Products bundle 🔥
    • Promotion banner
    • Recently viewed products
    • Rich text
    • Shop the feed 🔥
    • Scrolling banner
    • Scrolling gallery images
    • Scrolling promotion
    • Slideshow
    • Tabs content
    • Testimonials
    • Testimonials masonry 🔥
    • Video
    • Video hero
  • Theme settings
    • General
    • Animations
    • Blog cards
    • Buttons
    • Cart
    • Color swatches
    • Colors
    • Currency format
    • Custom CSS
    • Layout
    • Logo
    • Product badges
    • Product cards
    • Product compare
    • Quick view
    • Search behavior
    • Social media
    • Typography
  • Collections & Products
    • Product page
      • Product template
      • Breadcrumbs
      • Product information
      • Quick comparision table
      • Quick order list
      • Related products
    • Collection page
      • Collection template
      • Collection banner
      • Product grid
    • Collections list page
  • Other pages
    • Blogs
    • Blog posts
    • Cart
    • Password
    • Search page
  • FAQs
    • Add Highlighted text to your Headings
    • Add gift wrap option to my cart
    • Combined listings app
    • Set up Local Pickup option
    • Set up quantity rules and volume pricing in B2B
    • Show Payment icons
Powered by GitBook
On this page
  • Body text and Headings
  • Body text
  • Headings
  • Display headings
  • Subheadings
  • Product cards title
  • Navigation
  • Buttons
  1. Theme settings

Typography

A guide to choose fonts for the website

PreviousSocial mediaNextProduct page

Last updated 3 months ago

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.

Body text and Headings

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 weight.

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

Navigation

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.

To learn more about system font, see .

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

Shopify Manuals
Product card