> ## Documentation Index
> Fetch the complete documentation index at: https://docs.digifist.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Typography

> Control fonts, sizing, spacing, and text styling throughout your store

Typography settings define how text appears across your entire store - from headings and product descriptions to buttons and navigation menus. These choices affect readability, brand personality, and visual hierarchy. Well-chosen typography creates a cohesive brand experience and can improve content readability by up to 50%, making it one of the most impactful design decisions you'll make.

## What this controls

Typography settings determine how text appears across your entire store - from headings and product descriptions to buttons and navigation. These settings affect readability, brand personality, and visual hierarchy.

<Tip>Typography is one of the most impactful design decisions. Well-chosen fonts and sizing create a cohesive brand experience and improve readability.</Tip>

## How it works

Sahara's typography system has three key components:

1. **Type Scale:** Controls the size relationship between heading levels (H1, H2, H3, etc.)
2. **Font Choices:** Select fonts for headings, body text, and buttons
3. **Styling Controls:** Adjust sizing, letter spacing, and text transform

Changes apply globally - updating heading font changes all headings site-wide.

<Warning>Custom fonts can impact store speed. System fonts load instantly while custom fonts add 20-50KB per font family.</Warning>

## Getting started

<Steps>
  <Step title="Open Theme Customizer">
    From Shopify admin → **Online Store** → **Themes** → **Customize**
  </Step>

  <Step title="Access typography settings">
    Click **Theme settings** (gear icon in sidebar) → Select **Typography**
  </Step>

  <Step title="Choose your fonts">
    Start with heading font - this defines your brand personality
  </Step>

  <Step title="Adjust sizing">
    Set type scale first, then fine-tune with font scale percentages
  </Step>

  <Step title="Apply styling">
    Configure letter spacing and text transform to match your brand
  </Step>
</Steps>

## Location

**Path:** Theme settings → Typography

<img src="https://mintcdn.com/digifist/88E1UBOeQ_BQufjN/images/galantis/connect/typography/placeholder-location.png?fit=max&auto=format&n=88E1UBOeQ_BQufjN&q=85&s=3ce095c233ebcd27ebfd2d336c03b1dc" alt="Typography settings location" width="3280" height="2186" data-path="images/galantis/connect/typography/placeholder-location.png" />

## Settings

<Tabs>
  <Tab title="Font Selection">
    ### Heading Font

    Choose the primary font for all headings (H1 through H6) throughout your store.

    **Default:** Garamond (serif)

    <AccordionGroup>
      <Accordion title="Font recommendations by brand style">
        **Traditional/Elegant:**

        * Garamond (default) - Classic, timeless serif
        * Playfair Display - Sophisticated editorial
        * Lora - Warm, readable serif

        **Modern/Clean:**

        * Poppins - Geometric sans-serif
        * Inter - Highly readable, professional
        * Work Sans - Contemporary sans-serif

        **Bold/Creative:**

        * Bebas Neue - Strong display font
        * Montserrat - Bold, attention-grabbing
        * Archivo Black - Ultra-bold impact

        **Artisanal/Handmade:**

        * Shadows Into Light - Handwritten feel
        * Dancing Script - Elegant script
        * Amatic SC - Casual hand-drawn
      </Accordion>

      <Accordion title="System fonts vs custom fonts">
        **System Fonts (Faster):**

        * Load instantly (already on user's device)
        * No download required
        * Better performance
        * Examples: Arial, Georgia, Times New Roman

        **Custom Fonts (Brand-specific):**

        * Unique brand personality
        * Adds 20-50KB per font family
        * Slight performance impact
        * Hundreds of options available

        **Best Practice:** Use maximum 2-3 font families total across heading, body, and buttons.
      </Accordion>
    </AccordionGroup>

    ### Body Font

    Choose the font for body text - product descriptions, paragraphs, and general content.

    **Default:** Figtree (sans-serif)

    <Tip>Body text should prioritize readability. Choose a clean, neutral font that works well at smaller sizes.</Tip>

    <AccordionGroup>
      <Accordion title="Heading + Body font pairing guide">
        **Serif + Sans-Serif (Sahara Default):**

        * Garamond headings + Figtree body
        * Classic, elegant combination
        * High contrast creates hierarchy
        * Best for: Traditional, upscale stores

        **Sans-Serif + Sans-Serif:**

        * Poppins headings + Inter body
        * Modern, clean aesthetic
        * Maintains consistency
        * Best for: Tech, minimalist stores

        **Display + Sans-Serif:**

        * Bebas Neue headings + Work Sans body
        * Bold, attention-grabbing
        * Strong visual hierarchy
        * Best for: Fashion, creative stores

        **Serif + Serif:**

        * Playfair Display headings + Lora body
        * Editorial, sophisticated
        * Cohesive typography system
        * Best for: Publishing, lifestyle stores
      </Accordion>
    </AccordionGroup>

    ### Button Font

    Choose the font used for button text throughout your store.

    **Default:** Figtree (same as body)

    <Note>Most stores use the same font for buttons and body text. Consider a different font only if buttons need extra emphasis.</Note>
  </Tab>

  <Tab title="Font Styling">
    ### Type Scale

    Controls the size relationship between heading levels. This multiplier determines how much larger each heading level is compared to the next smaller level.

    **Options:**

    * **Small (1.200):** Subtle hierarchy, less dramatic size differences
    * **Medium (1.250):** Balanced hierarchy (default)
    * **Large (1.333):** Strong hierarchy, dramatic size differences

    **Default:** Medium (1.250)

    <AccordionGroup>
      <Accordion title="Understanding type scale">
        Type scale is a multiplier applied successively to create heading sizes.

        **Example with Medium (1.250):**

        * Body text: 16px
        * H6: 16px × 1.25 = 20px
        * H5: 20px × 1.25 = 25px
        * H4: 25px × 1.25 = 31px
        * H3: 31px × 1.25 = 39px
        * H2: 39px × 1.25 = 49px
        * H1: 49px × 1.25 = 61px

        Larger scales create more dramatic size differences between heading levels.
      </Accordion>

      <Accordion title="When to use each type scale">
        **Small (1.200):**

        * Text-heavy pages (blogs, product descriptions)
        * More headings fit on screen
        * Subtle, refined hierarchy
        * Good for professional/corporate sites

        **Medium (1.250) - Default:**

        * Balanced for most stores
        * Standard typographic scale
        * Works well with mixed content
        * Recommended starting point

        **Large (1.333):**

        * Visual-heavy pages (images, products)
        * Headings need strong emphasis
        * Dramatic visual hierarchy
        * Good for fashion/lifestyle sites
      </Accordion>
    </AccordionGroup>

    ### Heading Letter Spacing

    Controls the space between letters in headings.

    **Options:**

    * **Normal:** Default spacing (0)
    * **Wide:** Increased breathing room (+0.2rem)
    * **Tight:** Compact spacing (-0.2rem)

    **Default:** Normal

    <Tip>Uppercase headings (Sahara's default) often look better with wide letter spacing. Try "Wide" if using uppercase text transform.</Tip>

    ### Heading Text Transform

    Changes the capitalization of heading text.

    **Options:**

    * **Normal:** Text appears as entered
    * **Uppercase:** ALL LETTERS CAPITALIZED
    * **Lowercase:** all letters lowercase
    * **Capitalize:** First Letter Of Each Word Capitalized

    **Default:** Uppercase

    <AccordionGroup>
      <Accordion title="Text transform best practices">
        **Uppercase:**

        * Bold, attention-grabbing
        * Pair with wide letter spacing
        * Works well for short headings
        * Sahara's default style

        **Normal:**

        * Most readable for long headings
        * Natural, conversational tone
        * Good for detailed product names

        **Capitalize:**

        * Professional, formal appearance
        * Good for titles and headers
        * Maintains readability

        **Lowercase:**

        * Modern, minimalist aesthetic
        * Casual, approachable tone
        * Use sparingly
      </Accordion>
    </AccordionGroup>
  </Tab>

  <Tab title="Text Sizing">
    ### Heading Font Size Scale

    Adjust the overall size of all heading text as a percentage.

    **Range:** 50% – 150%\
    **Default:** 100%

    * **50%:** Half the default size (very compact)
    * **100%:** Default size (recommended)
    * **150%:** 1.5× larger (very prominent)

    <Warning>Heading font scale works together with Type Scale. Adjust Type Scale first, then use font size scale for fine-tuning.</Warning>

    <AccordionGroup>
      <Accordion title="When to adjust heading size">
        **Increase to 110-130%:**

        * Headers feel too small
        * Need stronger visual hierarchy
        * Large images require bigger titles
        * Fashion/lifestyle stores

        **Keep at 100%:**

        * Default sizing works well
        * Balanced with body text
        * Most stores (recommended)

        **Decrease to 80-90%:**

        * Headers feel too large
        * Text-heavy content
        * Many headings per page
        * Professional/corporate sites

        Avoid extreme values (50% or 150%) unless intentional design choice.
      </Accordion>
    </AccordionGroup>

    ### Body Font Size Scale

    Adjust the overall size of body text as a percentage.

    **Range:** 50% – 150%\
    **Default:** 100%

    * **50%:** Half the default size
    * **100%:** Default size (typically 16px)
    * **150%:** 1.5× larger

    <Note>Body text at 100% typically renders at 16px, which is the web standard for readability. Adjust cautiously.</Note>

    <AccordionGroup>
      <Accordion title="Body text sizing guidelines">
        **Increase to 105-115%:**

        * Target audience: older demographics
        * Long-form content (blog posts)
        * Improve readability
        * Accessibility considerations

        **Keep at 100%:**

        * Standard web readability
        * Works for most audiences
        * Balanced with headings

        **Decrease to 90-95%:**

        * Fit more content on screen
        * Technical/data-heavy pages
        * Younger, tech-savvy audience

        **Never go below 85%:** Hurts readability and accessibility.
      </Accordion>
    </AccordionGroup>
  </Tab>

  <Tab title="Performance">
    ### Font Loading Impact

    Understanding how font choices affect store speed.

    <AccordionGroup>
      <Accordion title="Font performance metrics">
        **System Fonts:**

        * Load time: 0ms (instant)
        * File size: 0KB (no download)
        * Examples: Arial, Georgia, Helvetica, Times New Roman

        **Custom Web Fonts:**

        * Load time: 100-500ms (network dependent)
        * File size: 20-50KB per font family
        * Adds to initial page load

        **Impact on Speed:**

        * 1 custom font: Minimal impact (\~30KB)
        * 2 custom fonts: Noticeable (\~60KB)
        * 3+ custom fonts: Significant impact (>90KB)

        Each font variant (regular, bold, italic) adds additional file size.
      </Accordion>

      <Accordion title="Optimizing font performance">
        **Best Practices:**

        1. **Limit font families:** Use maximum 2-3 total
        2. **Share fonts:** Use same font for body and buttons
        3. **Reduce variants:** Load only needed weights
        4. **Consider system fonts:** For extremely fast loads
        5. **Test performance:** Use Google PageSpeed Insights

        **Recommended Setup:**

        * 1 custom font for headings (brand personality)
        * 1 system font for body (performance)
        * Share body font for buttons

        **Total:** \~30KB added, minimal impact
      </Accordion>

      <Accordion title="Font loading best practices">
        Shopify automatically optimizes font loading, but you can help:

        **What Shopify Does:**

        * Preloads critical fonts
        * Uses font-display: swap
        * Compresses font files
        * CDN delivery

        **What You Can Do:**

        * Choose fonts wisely (2-3 max)
        * Test load times regularly
        * Monitor Core Web Vitals
        * Consider system fonts for body text

        **Performance Monitoring:**

        * Use Shopify's speed report
        * Check Google PageSpeed Insights
        * Monitor Largest Contentful Paint (LCP)
      </Accordion>
    </AccordionGroup>
  </Tab>
</Tabs>

<img src="https://mintcdn.com/digifist/88E1UBOeQ_BQufjN/images/galantis/connect/typography/placeholder-overview.png?fit=max&auto=format&n=88E1UBOeQ_BQufjN&q=85&s=bbf57e64b5b8c47b510eefaaaad80473" alt="Typography settings overview" width="3280" height="2186" data-path="images/galantis/connect/typography/placeholder-overview.png" />

## Best practices

<CardGroup cols={2}>
  <Card title="Choose 2-3 font families maximum" icon="font">
    More fonts slow your site and create visual confusion. Use one for headings, one for body, optionally one for buttons.
  </Card>

  <Card title="Prioritize readability for body" icon="book-open">
    Body text is read most - choose a clear, neutral font. Save personality for headings.
  </Card>

  <Card title="Test type scale first" icon="ranking-star">
    Type scale affects hierarchy between headings. Adjust this first, then fine-tune with percentage scales.
  </Card>

  <Card title="Use wide letter spacing with uppercase" icon="text-width">
    Sahara defaults to uppercase headings. Set letter spacing to "Wide" for better readability.
  </Card>

  <Card title="Consider your audience" icon="users">
    Older demographics benefit from larger text (110% body scale). Younger audiences tolerate smaller sizes.
  </Card>

  <Card title="Match fonts to brand personality" icon="wand-magic-sparkles">
    Traditional: Serif headings (Garamond, Playfair). Modern: Sans-serif (Poppins, Inter). Creative: Display fonts (Bebas Neue).
  </Card>

  <Card title="Test on mobile devices" icon="mobile-screen-button">
    Typography looks different on phones. Preview all changes on mobile before publishing.
  </Card>

  <Card title="Use consistent font pairing" icon="link">
    Follow established patterns: Serif + Sans, Sans + Sans, or Display + Sans. Avoid Serif + Serif unless editorial.
  </Card>

  <Card title="Avoid extreme size adjustments" icon="chart-line">
    Keep font size scales between 85-125% for most stores. Extreme values hurt readability.
  </Card>

  <Card title="Monitor performance impact" icon="gauge-high">
    Use Shopify's speed report or Google PageSpeed Insights. Keep Largest Contentful Paint (LCP) under 2.5s.
  </Card>
</CardGroup>

## Common use cases

<AccordionGroup>
  <Accordion title="Traditional/elegant store (default Sahara style)">
    **Goal:** Classic, upscale aesthetic with refined typography

    **Settings:**

    * Type scale: Medium (1.250)
    * Heading font: Garamond (default) or Playfair Display
    * Heading size scale: 100-110%
    * Heading letter spacing: Wide (with uppercase)
    * Heading text transform: Uppercase (default)
    * Body font: Figtree (default) or Lora
    * Body size scale: 100-105%

    **Why this works:** Serif headings create elegance, uppercase adds formality, sans-serif body maintains readability.
  </Accordion>

  <Accordion title="Modern/minimalist store">
    **Goal:** Clean, contemporary look with excellent readability

    **Settings:**

    * Type scale: Medium (1.250)
    * Heading font: Poppins or Inter
    * Heading size scale: 100%
    * Heading letter spacing: Normal
    * Heading text transform: Normal (change from default)
    * Body font: Inter or Work Sans
    * Body size scale: 100%
    * Button font: Same as body

    **Why this works:** Sans-serif throughout creates cohesion, normal case improves readability, minimal styling keeps focus on content.
  </Accordion>

  <Accordion title="Bold/fashion-forward store">
    **Goal:** Strong visual impact with dramatic hierarchy

    **Settings:**

    * Type scale: Large (1.333)
    * Heading font: Bebas Neue or Montserrat Bold
    * Heading size scale: 120-130%
    * Heading letter spacing: Wide
    * Heading text transform: Uppercase
    * Body font: Work Sans or Inter
    * Body size scale: 95-100%

    **Why this works:** Large type scale + bold font + increased size creates drama, uppercase with wide spacing adds impact, smaller body text emphasizes headings.
  </Accordion>

  <Accordion title="Text-heavy blog or editorial">
    **Goal:** Maximum readability for long-form content

    **Settings:**

    * Type scale: Small (1.200)
    * Heading font: Playfair Display or Lora
    * Heading size scale: 95-100%
    * Heading letter spacing: Normal
    * Heading text transform: Normal (change from default)
    * Body font: Lora or Georgia (system font)
    * Body size scale: 105-110%

    **Why this works:** Small type scale reduces heading dominance, larger body text improves reading experience, serif fonts create editorial feel, normal case aids comprehension.
  </Accordion>
</AccordionGroup>

## Related settings

* [Colors](/themes/sahara/theme-settings/colors) - Match typography style with color palette
* [Layout](/themes/sahara/theme-settings/layout) - Typography works with layout widths
* [Buttons](/themes/sahara/theme-settings/buttons) - Button typography connects with overall type system
* [Common Settings](/themes/sahara/common-settings) - Typography applies within section containers

***

**Need help?** See [Shopify's typography guide](https://help.shopify.com/manual/online-store/themes/customize/typography) or [font performance tips](https://help.shopify.com/manual/online-store/os/store-speed/improving-speed#fonts).