Skip to main content
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.
Typography is one of the most impactful design decisions. Well-chosen fonts and sizing create a cohesive brand experience and improve readability.

​
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.
Custom fonts can impact store speed. System fonts load instantly while custom fonts add 20-50KB per font family.

​
Getting started

1

Open Theme Customizer

From Shopify admin → Online Store → Themes → Customize
2

Access typography settings

Click Theme settings (gear icon in sidebar) → Select Typography
3

Choose your fonts

Start with heading font - this defines your brand personality
4

Adjust sizing

Set type scale first, then fine-tune with font scale percentages
5

Apply styling

Configure letter spacing and text transform to match your brand

​
Location

Path: Theme settings → Typography Typography settings location

​
Settings

​
Heading Font

Choose the primary font for all headings (H1 through H6) throughout your store.Default: Garamond (serif)
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
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.

​
Body Font

Choose the font for body text - product descriptions, paragraphs, and general content.Default: Figtree (sans-serif)
Body text should prioritize readability. Choose a clean, neutral font that works well at smaller sizes.
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

​
Button Font

Choose the font used for button text throughout your store.Default: Figtree (same as body)
Most stores use the same font for buttons and body text. Consider a different font only if buttons need extra emphasis.
Typography settings overview

​
Best practices

Choose 2-3 font families maximum

More fonts slow your site and create visual confusion. Use one for headings, one for body, optionally one for buttons.

Prioritize readability for body

Body text is read most - choose a clear, neutral font. Save personality for headings.

Test type scale first

Type scale affects hierarchy between headings. Adjust this first, then fine-tune with percentage scales.

Use wide letter spacing with uppercase

Sahara defaults to uppercase headings. Set letter spacing to “Wide” for better readability.

Consider your audience

Older demographics benefit from larger text (110% body scale). Younger audiences tolerate smaller sizes.

Match fonts to brand personality

Traditional: Serif headings (Garamond, Playfair). Modern: Sans-serif (Poppins, Inter). Creative: Display fonts (Bebas Neue).

Test on mobile devices

Typography looks different on phones. Preview all changes on mobile before publishing.

Use consistent font pairing

Follow established patterns: Serif + Sans, Sans + Sans, or Display + Sans. Avoid Serif + Serif unless editorial.

Avoid extreme size adjustments

Keep font size scales between 85-125% for most stores. Extreme values hurt readability.

Monitor performance impact

Use Shopify’s speed report or Google PageSpeed Insights. Keep Largest Contentful Paint (LCP) under 2.5s.

​
Common use cases

Goal: Classic, upscale aesthetic with refined typographySettings:
  • 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.
Goal: Clean, contemporary look with excellent readabilitySettings:
  • 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.
Goal: Strong visual impact with dramatic hierarchySettings:
  • 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.
Goal: Maximum readability for long-form contentSettings:
  • 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.
  • Colors - Match typography style with color palette
  • Layout - Typography works with layout widths
  • Buttons - Button typography connects with overall type system
  • Common Settings - Typography applies within section containers
Need help? See Shopify’s typography guide or font performance tips.