Hampton Bay Theme Docs – Your Path to E-Commerce!
Help CenterCompliance & LegalContact Us
  • Hampton Bay Theme Configuration
  • Overview
    • Our key features
    • Setting up the Hampton BayTheme
  • Theme
    • Header and Footer setup
      • Header
      • Announcement bar
      • Footer
    • Languages & Currencies
    • Theme customization options
      • Color Scheme
      • Typography
      • Inputs
      • Social media
      • Cart Drawer
      • Brand Information
      • Search Drawer
    • Sections
      • Banner Slider
      • Collage
      • Collapsible Content
      • Collections List
      • Collections Tab
      • Contact Form
      • Featured Collection
      • Featured Product
      • RichText
      • Multirow
      • Video Section
      • Featured Blog
      • Custom Liquid
      • Page Section
      • Image with Text
      • Multicolumn
      • Shop the Look Section
    • Cart
    • Pages
      • Collection
      • Product
      • About Us
      • Contact Us
Powered by GitBook
On this page
  • How to set up the header section
  • How to customize typography in shopify
  1. Theme
  2. Theme customization options

Typography

Customize your store’s look: Set perfect typography in your shopify theme

PreviousColor SchemeNextInputs

Last updated 4 months ago

How to set up the header section

  1. Font selection Choose fonts that align with your brand's personality. For example, sans-serif fonts like Helvetica or Arial work well for modern, minimal designs, while serif fonts like Times New Roman evoke a classic or sophisticated feel.

  2. Font pairing

    Use complementary fonts for headings and body text. A bold font for headings combined with a clean, readable font for body text creates a balanced and professional look.

  3. Font size

    Ensure headings, subheadings, and body text have distinct sizes to create a clear hierarchy. Typical body text sizes range from 14px to 18px, while headings are larger to stand out.

  4. Line spacing (Line Height)

    Proper line spacing improves readability. A line height of 1.5x the font size is commonly recommended for body text.

  5. Letter spacing (Tracking)

    Adjust spacing between characters to enhance the legibility of text, especially for larger headings or logos.

  6. Font weight Use bold or semi-bold weights for emphasis in headings or important details and lighter weights for body text.

How to customize typography in shopify

  1. Access the theme editor In your Shopify Admin, go to Online Store > Themes and click Customize.

  2. Open theme settings In the left-hand sidebar, select Typography under theme Settings.

  3. Set fonts Choose fonts for headings, body text, and buttons from Shopify’s integrated library or upload custom fonts.

  4. Adjust styles Modify font sizes, weights, and spacing to fit your store's layout and design.

  5. Preview changes Ensure the text is clear, consistent, and visually appealing across all devices

Typography best practices