Heading Font
Choose the primary font for all headings (H1 through H6) throughout your store.Default: Garamond (serif)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
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. 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.
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
Most stores use the same font for buttons and body text. Consider a different font only if buttons need extra emphasis.
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)
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. 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
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: NormalUppercase headings (Sahara’s default) often look better with wide letter spacing. Try “Wide” if using uppercase text transform.
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: UppercaseText 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
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)
Heading font scale works together with Type Scale. Adjust Type Scale first, then use font size scale for fine-tuning.
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. 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
Body text at 100% typically renders at 16px, which is the web standard for readability. Adjust cautiously.
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. 
