Typography
Control text appearance for perfect readability across devices.
Font Family
System Fonts
-apple-system, Arial, Helvetica
- ⚡ Instant loading, best performance
- Native look
Google Fonts
| Font | Style | Best For |
|---|---|---|
| Inter | Modern sans | Professional, clean |
| Roboto | Neutral | Versatile, safe |
| Montserrat | Geometric | Bold, confident |
| Poppins | Rounded | Friendly, young |
| Lato | Elegant | Warm, stable |
| Playfair | Serif | Luxury, premium |
Font Sizes
| Element | Default | Range | Recommended |
|---|---|---|---|
| Product Name | 16px | 12-24px | 16-18px |
| Price | 18px | 14-28px | 18-22px |
| Button | 16px | 12-20px | 16-17px |
Best Practice: Price larger than product name for hierarchy.
Mobile Minimum: 16px for readability and touch targets.
Font Weights
| Weight | Value | Use For |
|---|---|---|
| Light | 300 | Elegant, minimal |
| Regular | 400 | Standard text |
| Medium | 500 | Product names |
| Semi-Bold | 600 | Buttons, CTAs |
| Bold | 700 | Prices, emphasis |
Typography Combos
Professional
Font: Inter
Product: 16px Medium (500)
Price: 18px Semi-Bold (600)
Button: 16px Semi-Bold (600)
Bold & Modern
Font: Montserrat
Product: 18px Semi-Bold (600)
Price: 22px Bold (700)
Button: 17px Bold (700)
Minimal & Clean
Font: System
Product: 15px Regular (400)
Price: 17px Medium (500)
Button: 15px Medium (500)
Visual Hierarchy
Recommended:
Price (20px Bold)
> Product Name (16px Medium)
> Button (16px Semi-Bold)
Accessibility
- Normal text: 4.5:1 contrast minimum
- Large text (18px+): 3:1 contrast
- Mobile minimum: 14px body, 16px buttons
- Touch targets: 44x44px minimum
Common Mistakes
| ❌ Avoid | ✅ Instead |
|---|---|
| Too small on mobile | 16px minimum |
| No hierarchy | Price largest |
| Decorative fonts | Simple, legible |
Next Steps
Font Family
Select the typeface for all text in the sticky cart.
System Fonts
-apple-system, Arial, Helvetica
Pros:
- Instant loading (no download)
- Best performance
- Native look and feel
- Always available
Best for:
- Speed-focused stores
- Minimal aesthetic
- Maximum compatibility
Google Fonts
Popular web fonts loaded from Google's CDN.
Inter
- Modern, clean sans-serif
- Excellent readability
- Professional appearance
- Great for body text
Roboto
- Google's flagship font
- Highly legible
- Works everywhere
- Safe choice
Montserrat
- Geometric sans-serif
- Strong, confident
- Good for headings
- Modern feel
Poppins
- Rounded, friendly
- Approachable
- Great for brands targeting younger audiences
Lato
- Elegant sans-serif
- Warm, stable
- Professional yet friendly
Open Sans
- Optimized for screens
- Neutral, versatile
- Widely used
Playfair Display
- Elegant serif
- Luxury feel
- Best for headings
- Premium brands
Font Selection Tips:
- Match your theme's font when possible
- Sans-serif for modern/clean
- Serif for traditional/luxury
- Test readability on mobile
Font Sizes
Control text size for different elements.
Product Name Size
Default: 16px Range: 12-24px
Guidelines:
- 12-14px: Very compact, mobile-focused
- 16-18px: Standard, good readability
- 20-24px: Large, high emphasis
When to increase:
- Poor eyesight target audience
- Product name is key selling point
- Lots of screen space available
When to decrease:
- Long product names
- Minimal aesthetic desired
- Limited vertical space
Price Size
Default: 18px Range: 14-28px
Guidelines:
- 14-16px: Subtle, de-emphasized
- 18-20px: Standard visibility
- 24-28px: High prominence
Best practice:
- Price should be slightly larger than product name
- Create visual hierarchy
- Make it easy to spot
When to make prominent:
- Competitive pricing
- Frequent sales
- Price is selling point
Button Font Size
Default: 16px Range: 12-20px
Guidelines:
- 12-14px: Compact buttons
- 16px: Standard, recommended
- 18-20px: Large, high visibility
Considerations:
- Larger = easier to tap on mobile
- Too large = unprofessional
- Match theme button sizes
Font Weights
Control text boldness.
Available Weights
- 300: Light
- 400: Regular (normal)
- 500: Medium
- 600: Semi-Bold
- 700: Bold
Product Name Weight
Recommended: 500-600 (Medium to Semi-Bold)
Light (300):
- Elegant, refined
- Luxury brands
- Minimal aesthetic
Regular (400):
- Standard readability
- Neutral appearance
- Safe choice
Medium (500):
- Slight emphasis
- Good balance
- Recommended default
Semi-Bold (600):
- Strong presence
- Clear hierarchy
- Good for scanning
Bold (700):
- Maximum emphasis
- High energy brands
- Can feel heavy
Price Weight
Recommended: 600-700 (Semi-Bold to Bold)
Why bold?
- Price deserves emphasis
- Easy to scan
- Catches attention
When to use regular:
- Minimal design
- Price not main focus
- Already large font size
Button Font Weight
Recommended: 600 (Semi-Bold)
Light-Medium (300-500):
- Elegant
- Understated
- Less call-to-action feel
Semi-Bold (600):
- Clear action
- Professional
- Recommended
Bold (700):
- Maximum impact
- Urgent tone
- High energy
Typography Combinations
Recommended Pairings
Professional:
Font: Inter
Product Name: 16px, Weight 500
Price: 18px, Weight 600
Button: 16px, Weight 600
Elegant:
Font: Lato
Product Name: 17px, Weight 400
Price: 20px, Weight 600
Button: 16px, Weight 600
Bold & Modern:
Font: Montserrat
Product Name: 18px, Weight 600
Price: 22px, Weight 700
Button: 17px, Weight 700
Friendly & Approachable:
Font: Poppins
Product Name: 16px, Weight 500
Price: 19px, Weight 600
Button: 16px, Weight 600
Minimal & Clean:
Font: System
Product Name: 15px, Weight 400
Price: 17px, Weight 500
Button: 15px, Weight 500
Visual Hierarchy
Creating Effective Hierarchy
Size hierarchy: Price > Product Name > Button Text
Example:
- Price: 20px
- Product Name: 16px
- Button: 16px
Weight hierarchy: Price (Bold) > Button (Semi-Bold) > Product Name (Medium)
Why Hierarchy Matters
Benefits:
- Guides eye to important info
- Improves scannability
- Creates professional appearance
- Enhances usability
Poor hierarchy example:
Product Name: 18px, Bold
Price: 16px, Regular
Button: 14px, Regular
Everything competes for attention
Good hierarchy example:
Product Name: 16px, Medium
Price: 20px, Bold
Button: 16px, Semi-Bold
Clear visual flow
Readability Guidelines
Mobile Readability
Minimum sizes:
- Body text: 14px minimum
- Buttons: 16px minimum
- Touch targets: 44x44px minimum
Best practices:
- Test on actual devices
- Check in bright sunlight
- Verify with older eyes
- Ensure comfortable reading
Desktop Readability
Considerations:
- Viewing distance longer
- Can use slightly smaller text
- More screen space available
- Higher resolution displays
Matching Your Theme
Finding Theme Fonts
Method 1: Inspect Element
- Open your store
- Right-click on text
- Select "Inspect"
- Check computed styles
- Look for
font-family
Method 2: Theme Settings
- Go to theme customizer
- Check typography settings
- Note font choices
- Use same or complementary
Why match:
- Consistent brand experience
- Professional appearance
- Familiar to customers
- Cohesive design
Font Loading
Google Fonts Performance
What happens:
- Font loads from Google's CDN
- Cached across websites
- Usually loads quickly
- Slight delay on first visit
Optimization:
- System fonts load instantly
- Google Fonts cached after first load
- Minimal performance impact
Accessibility
WCAG Guidelines
Font size minimums:
- Body text: 14-16px
- Interactive elements: 16px+
Contrast with background:
- Large text (18px+): 3:1 ratio
- Normal text: 4.5:1 ratio
Font weight:
- Light weights need larger sizes
- Thin fonts reduce readability
- Medium+ weights recommended
Common Typography Mistakes
Too Small
Problem: Text difficult to read on mobile
Solution:
- Minimum 14px for all text
- 16px+ for buttons
- Test on actual devices
Too Many Fonts
Problem: Using different fonts for each element
Solution:
- One font family for entire cart
- Create hierarchy with size/weight
- Keep it simple
Poor Hierarchy
Problem: Everything same size/weight
Solution:
- Make price largest/boldest
- Use weight for emphasis
- Create clear visual order
Decorative Fonts
Problem: Hard-to-read script or display fonts
Solution:
- Use simple, legible fonts
- Save decorative fonts for logos
- Prioritize readability
Best Practices
- Match Your Theme - Use consistent fonts
- Size for Mobile - Optimize for small screens
- Create Hierarchy - Guide the eye
- Bold the Price - Make it stand out
- Test Readability - On real devices
- Keep It Simple - One font family
- Weight Matters - Use it for emphasis
Quick Reference
| Element | Recommended Size | Recommended Weight |
|---|---|---|
| Product Name | 16-18px | 500-600 |
| Price | 18-22px | 600-700 |
| Button | 16-17px | 600 |
Next Steps
- Spacing - Adjust layout and padding
- Colors - Set your color palette
- Presets - Try pre-configured typography
Good typography is invisible - it just works. Choose wisely, test thoroughly, and prioritize readability!